/* css/mobile.css */

/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ - ИРИНА КОСТИНА
   
   INTRO:
   - Фото ч/б маленькое по центру
   - Текст сверху +20%, текст снизу -20%
   
   HERO (после "ВПЕЧАТЛЕНИЙ"):
   - Фото пружиной на весь экран, становится цветным
   - "КОСТИНА ИРИНА" сверху красным
   - "Я СОЗДАЮ..." снизу белым
   
   GALLERY:
   - Белая шторка закрывает фото и имя
   - Текст меняет цвет на чёрный
   ========================================================= */

/* =========================================================
   TABLET (≤1024px)
   ========================================================= */
@media (max-width: 1024px) {
  .hero-title { font-size: 5.5vw; }
  .constant-text .line { font-size: 2.2vw; }
  .name-title { font-size: 2.5vw; }
  .card-small { width: 20vw; }
  .card-large { width: 38vw; }
  .card-vertical { width: 22vw; }
  .card-horizontal { width: 30vw; }
}

/* =========================================================
   MOBILE (≤768px)
   ========================================================= */
@media (max-width: 768px) {
  
  body {
    background-color: #000;
    overflow-x: hidden;
  }
  
  .scroll-container { background: transparent; }
  
  .hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: block;
    padding: 0;
    background: #000;
    overflow: visible;
  }
  
  /* =========================================================
     ФОТО - центр экрана
     INTRO: маленькое ч/б
     HERO: fullscreen цветное (после анимации из main.js)
     ========================================================= */
  .hero-photo-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40vw;
    height: auto;
    z-index: 2;
    filter: grayscale(100%);
    pointer-events: none;
  }
  
  .hero-photo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .hero-title-container { display: none; }
  
  /* =========================================================
     INTRO TEXT - позиции +20% / -20%
     ========================================================= */
  .intro-text-wrapper {
    position: fixed;
    inset: 0;
    z-index: 30;
    pointer-events: none;
  }
  
  .intro-block {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 5vw;
  }
  
  /* Верхние блоки - подняты на 20% (было 3vh → стало ~23vh от верха) */
  .intro-block-1,
  .intro-block-3 {
    top: 8vh;
  }
  
  /* Нижние блоки - опущены на 20% (было 3vh → стало ~23vh от низа) */
  .intro-block-2,
  .intro-block-4 {
    bottom: 8vh;
  }
  
  .intro-line {
    font-family: 'Oswald', sans-serif;
    font-size: 9vw;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
  }
  
  .intro-line.red { color: #FF3B30; }
  .intro-line.white { color: #FFFFFF; }
  
  /* =========================================================
     NAME LAYER - "КОСТИНА ИРИНА" сверху
     ========================================================= */
  #name-layer {
    position: fixed !important;
    top: 6vh !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    text-align: center;
    z-index: 5;
    pointer-events: none;
  }
  
  .name-title {
    font-size: 11vw;
    color: #FF3B30;
    line-height: 0.9;
    text-shadow: 0 2px 30px rgba(0,0,0,0.5);
  }
  
  /* =========================================================
     CONSTANT LAYER - "Я СОЗДАЮ..." снизу - ВСЕГДА ПОВЕРХ
     Поднят на 10% чтобы поместился полный текст
     ========================================================= */
  #constant-layer {
    position: fixed !important;
    top: auto !important;
    bottom: 16vh !important;
    left: 5vw !important;
    right: 5vw !important;
    text-align: left;
    z-index: 500 !important;
    pointer-events: none;
    transform-origin: left bottom !important;
  }
  
  .constant-text .line {
    font-size: 5vw;
    line-height: 1.2;
    color: #FFFFFF;
    white-space: normal;
    text-shadow: 0 2px 20px rgba(0,0,0,0.8);
    transition: color 0.4s ease, text-shadow 0.4s ease;
    mix-blend-mode: normal;
  }
  
  /* Показываем ВСЕ 4 строки на mobile */
  .constant-text .line:nth-child(n+4) { 
    display: block; 
  }
  
  /* =========================================================
     UI LAYER - скрыт на mobile
     ========================================================= */
  .ui-layer { display: none !important; }
  
  /* =========================================================
     MOBILE FOOTER
     ========================================================= */
  .mobile-footer {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 36px;
    justify-content: center;
    align-items: center;
    gap: 3vw;
    padding: 0 4vw;
    background: transparent;
    z-index: 150;
    font-family: 'Oswald', sans-serif;
    font-size: 2.6vw;
    font-weight: 500;
    text-transform: uppercase;
    color: #FFFFFF;
    transition: color 0.4s ease, background 0.4s ease;
  }
  
  .mobile-footer a, .mobile-footer span {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.7;
  }
  
  .mobile-footer a:hover, .mobile-footer span:hover {
    opacity: 1;
  }
  
  .mobile-footer .active {
    opacity: 1;
  }
  
  .mobile-footer .divider { opacity: 0.3; }
  
  /* =========================================================
     GALLERY - белая шторка
     ========================================================= */
  .gallery {
    position: relative;
    min-height: 200vh;
    padding: 0;
    background: #FFFFFF;
    z-index: 10;
    overflow-x: clip;
    max-width: 100vw;
  }
  
  .gallery-stage {
    position: relative;
    width: 100%;
    max-width: 100vw;
    min-height: 220vh;
    padding-top: 5vh;
    overflow-x: clip;
  }
  
  /* Desktop eler скрыт */
  .eler-layer { display: none !important; }
  
  /* =========================================================
     GALLERY ACTIVE - footer меняет фон, текст становится чёрным
     ========================================================= */
  body.gallery-active .constant-text .line {
    color: #000000;
    text-shadow: none;
  }
  
  body.gallery-active .mobile-footer {
    color: #000000;
    background: rgba(255,255,255,0.9);
  }
  
  /* Текст "Я создаю..." ВСЕГДА поверх на mobile */
  #constant-layer.under-gallery {
    z-index: 500 !important;
  }
  
  /* =========================================================
     CARDS - draggable на mobile
     ========================================================= */
  .card {
    position: absolute;
    touch-action: none;
    cursor: grab;
    background: #fff;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    border-radius: 2px;
    overflow: hidden;
    z-index: 100;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  
  .card:active { cursor: grabbing; }
  .card.dragging { z-index: 500 !important; box-shadow: 0 25px 50px rgba(0,0,0,0.3); }
  
  .card-small { width: 42vw; aspect-ratio: 3/4; }
  .card-large { width: 70vw; aspect-ratio: 16/9; }
  .card-vertical { width: 45vw; aspect-ratio: 9/16; }
  .card-horizontal { width: 60vw; aspect-ratio: 4/3; }
  .card-video-vertical { width: 45vw; aspect-ratio: 9/16; } /* Instagram Reels */
  
  /* =========================================================
     LANGUAGE PANEL
     ========================================================= */
  .lang-panel {
    height: 35vh;
    max-height: 35vh;
    background: #000;
    z-index: 500;
  }
  
  .lang-panel-inner {
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 3vw 4vw;
    padding: 3vh 3vw;
    overflow-y: auto;
  }
  
  .lang-item {
    flex: 0 0 auto;
    width: calc(20% - 4vw);
    min-width: 50px;
  }
  
  .lang-avatar {
    width: 10vw;
    height: 10vw;
    max-width: 50px;
    max-height: 50px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  
  .lang-avatar:hover { transform: scale(2); }
  
  .lang-name { font-size: 2vw; }
  
  .letter-o { width: 1em; height: 1em; }
  .footer { display: none; }
}


/* =========================================================
   LARGE PHONE (≤430px)
   ========================================================= */
@media (max-width: 430px) {
  .hero-photo-wrapper { width: 45vw; }
  .name-title { font-size: 12vw; }
  #name-layer { top: 5vh !important; }
  .intro-line { font-size: 10vw; }
  .intro-block-1, .intro-block-3 { top: 10vh; }
  .intro-block-2, .intro-block-4 { bottom: 10vh; }
  .constant-text .line { font-size: 5.5vw; }
  #constant-layer { bottom: 5vh !important; }
  .mobile-footer { font-size: 2.8vw; height: 34px; gap: 2.5vw; }
}

/* =========================================================
   STANDARD PHONE (≤375px)
   ========================================================= */
@media (max-width: 375px) {
  .hero-photo-wrapper { width: 50vw; }
  .name-title { font-size: 13vw; }
  .intro-line { font-size: 11vw; }
  .constant-text .line { font-size: 6vw; }
  .mobile-footer { font-size: 3vw; height: 32px; gap: 2vw; }
  .card-small { width: 48vw; }
  .card-large { width: 80vw; }
}

/* =========================================================
   SMALL PHONE (≤320px)
   ========================================================= */
@media (max-width: 320px) {
  .name-title { font-size: 14vw; }
  .intro-line { font-size: 12vw; }
  .constant-text .line { font-size: 6.5vw; }
  .mobile-footer { font-size: 3.2vw; height: 30px; gap: 1.5vw; }
}

/* =========================================================
   LANDSCAPE - фикс горизонтального скролла (DESKTOP ONLY)
   ========================================================= */
@media (max-width: 1024px) and (orientation: landscape) and (hover: hover) and (pointer: fine) {
  /* Жёсткий блок горизонтального скролла на уровне документа */
  html {
    overflow-x: hidden;
    overflow-x: clip;
  }
  
  body {
    overflow-x: hidden;
    overflow-x: clip;
    position: relative;
    width: 100%;
    max-width: 100vw;
  }
  
  /* Scroll container не должен расширяться */
  .scroll-container {
    overflow-x: clip;
    max-width: 100vw;
  }
  
  /* Gallery клипает контент внутри себя */
  .gallery {
    overflow-x: clip;
    max-width: 100vw;
  }
  
  .gallery-stage {
    width: 100%;
    max-width: 100vw;
    overflow-x: clip;
  }
  
  /* Hero не должен просвечивать */
  .hero-photo-wrapper {
    max-width: 100vw;
  }
  
  /* Размеры шрифтов для landscape */
  .name-title { font-size: 8vh; }
  #name-layer { top: 3vh !important; }
  .intro-line { font-size: 8vh; }
  .intro-block-1, .intro-block-3 { top: 5vh; }
  .intro-block-2, .intro-block-4 { bottom: 5vh; }
  .constant-text .line { font-size: 3.5vh; }
  .mobile-footer { height: 30px; font-size: 2.5vh; }
}

/* Дополнительный фикс для узкого landscape (телефоны) - только desktop */
@media (max-width: 768px) and (orientation: landscape) and (hover: hover) and (pointer: fine) {
  html, body {
    overscroll-behavior-x: none;
  }
}

/* =========================================================
   RTL SUPPORT - MOBILE (Arabic, Hebrew)
   ========================================================= */
@media (max-width: 768px) {
  body.rtl #constant-layer { 
    left: auto !important; 
    right: 5vw !important; 
    text-align: right; 
  }
  
  body.rtl #name-layer {
    text-align: center;
  }
  
  body.rtl .mobile-footer { 
    flex-direction: row-reverse; 
  }
  
  body.rtl .intro-block {
    direction: rtl;
  }
  
  body.rtl .intro-line {
    direction: rtl;
  }
  
  body.rtl .constant-text .line {
    text-align: right;
  }
}

/* =========================================================
   TOUCH DEVICE DETECTION
   Телефоны в landscape не должны получать desktop стили
   ========================================================= */

/* =========================================================
   IS-TOUCH: Любой touch device (JS добавляет класс)
   Только переключает UI элементы, не трогает layout
   ========================================================= */

/* Touch PORTRAIT - скрываем desktop UI */
html.is-touch.is-portrait .ui-layer {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Touch LANDSCAPE - ui-layer виден (desktop стили) */
/* Не добавляем правил - пусть layout.css работает */

/* Touch portrait - скрываем desktop элементы */
html.is-touch.is-portrait .hero-title-container {
  display: none !important;
  visibility: hidden !important;
}

html.is-touch.is-portrait .eler-layer {
  display: none !important;
  visibility: hidden !important;
}

html.is-touch.is-portrait .mobile-footer {
  display: flex !important;
}

html.is-touch.is-portrait .ui-layer {
  display: none !important;
}

/* Touch landscape - НЕ ТРОГАЕМ, пусть desktop стили работают */
/* Desktop CSS использует vw/vh - автоматически масштабируется */

/* =========================================================
   IS-DESKTOP: Устройства с мышью/трекпадом
   ========================================================= */
html.is-desktop .ui-layer {
  display: block !important;
}

html.is-desktop .mobile-footer {
  display: none !important;
}

/* =========================================================
   MOBILE LANDSCAPE: Перенесено в mobile-landscape.css
   ========================================================= */

/* Fallback для hover/pointer если JS не загрузился - ТОЛЬКО PORTRAIT */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .ui-layer {
    display: none !important;
  }
  
  .mobile-footer {
    display: flex !important;
  }
  
  .hero-title-container {
    display: none !important;
  }
  
  .eler-layer {
    display: none !important;
  }
}

/* Fallback для LANDSCAPE touch - показываем desktop элементы */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .ui-layer {
    display: block !important;
  }
  
  .mobile-footer {
    display: none !important;
  }
  
  .hero-title-container {
    display: block !important;
  }
  
  .eler-layer {
    display: block !important;
  }
  
  #name-layer {
    display: block !important;
  }
  
  .eler-sticky {
    display: none !important;
  }
}

/* =========================================================
   IS-DESKTOP: Устройства с мышью/трекпадом
   ========================================================= */
html.is-desktop .ui-layer {
  display: block;
}

html.is-desktop .mobile-footer {
  display: none !important;
}

html.is-desktop .eler-layer {
  display: block;
}

/* Fallback: media queries для случаев когда JS не загрузился */
/* Только для PORTRAIT touch устройств */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  html:not(.is-desktop) .ui-layer {
    display: none !important;
  }
  
  html:not(.is-desktop) .mobile-footer {
    display: flex !important;
  }
  
  html:not(.is-desktop) .hero-title-container {
    display: none !important;
  }
  
  html:not(.is-desktop) .eler-layer {
    display: none !important;
  }
}
/*
   DESKTOP (mouse/trackpad devices only)
   Гарантирует что desktop стили применяются только к настоящим десктопам
*/
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  /* Desktop UI виден */
  .ui-layer {
    display: block;
  }
  
  /* Mobile footer скрыт */
  .mobile-footer {
    display: none;
  }
  
  /* Desktop Euler виден */
  .eler-layer {
    display: block;
  }
  
  /* Hero title виден */
  .hero-title-container {
    display: block;
  }
}