/* ===================================================================
   OrientoGrace — Окно 1 · 4 ЗЕРКАЛА вокруг лого   (эволюция «яиц»)
   Симметричный овал (НЕ яйцо): тонкий золотой багет с гравировкой-
   каннелюрами, внешний волосяной кант с воздушным зазором, вензель-
   гребень (камень + завитушки) на короне. В глубине — синий «поволок»
   и угадывающийся силуэт. Наполнение медленно перетекает
   картинка (овал) ↔ цитата «Из записок Лафайетте» (прямоугольник).
   Оттенки РАЗНЫЕ и переливаются НЕ синхронно. Светящаяся точка —
   кнопка «видео». «Тихая роскошь»: зелёный+золото, перламутр/синь,
   без розового. prefers-reduced-motion — статичный фолбэк.
   (Классы .egg/.eggs сохранены как внутренние токены — «зеркало».)
   =================================================================== */

.eggs{
  position:absolute; inset:0; z-index:4;   /* над текстом — развёрнутая карточка не обрезается */
  pointer-events:none;                      /* клики проходят сквозь промежутки */
}

/* ---- одно зеркало: морфящийся «сосуд» в золотой раме ---- */
.egg{
  position:absolute;
  left:var(--x); top:var(--y);
  width:var(--w,160px); height:var(--h,214px);
  transform:translate(-50%,-50%);
  padding:0; border:0; background:none;
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
  animation:egg-bob var(--bob,15s) ease-in-out var(--bd,0s) infinite;
  transition:width 3.4s cubic-bezier(.62,.02,.16,1),
             height 3.4s cubic-bezier(.62,.02,.16,1);
}
:root{ --egg-r:50%; }   /* симметричный овал зеркала — больше не «яйцо» */

/* мягкий ореол-«дыхание» за зеркалом (в оттенке зеркала) */
.egg__halo{
  position:absolute; left:50%; top:52%;
  width:150%; height:134%;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,
     var(--halo,rgba(201,168,106,.4)) 0%, rgba(201,168,106,.12) 50%, transparent 74%);
  filter:blur(28px); opacity:.42; z-index:0; pointer-events:none;
  animation:egg-halo var(--bob,15s) ease-in-out var(--bd,0s) infinite;
}

/* ТОНКИЙ ЗОЛОТОЙ БАГЕТ — узкая полированная рама с гравировкой-каннелюрами */
.egg::before{
  content:""; position:absolute; inset:0; z-index:1;
  border-radius:var(--egg-r);
  background:
    repeating-conic-gradient(from 2deg,
      transparent 0deg 2.4deg, rgba(94,70,31,.42) 2.4deg 3deg,
      rgba(255,246,220,.30) 3deg 3.6deg, transparent 3.6deg 6deg),
    conic-gradient(from 128deg,
      #9a7a3e, #f1ddaa 11%, #c9a86a 23%, #86662f 37%,
      #e8d199 51%, #b6935a 64%, #f6e8c2 79%, #8f6f38 100%);
  box-shadow:
    0 16px 30px -18px rgba(5,14,10,.65),
    0 36px 60px -30px rgba(4,12,9,.55),
    inset 0 0 0 1px rgba(255,247,225,.65),
    inset 0 0 9px rgba(120,90,45,.55);
  transition:border-radius 3.4s cubic-bezier(.62,.02,.16,1);
}
/* внешний волосяной кант — парит вокруг рамы с воздушным зазором */
.egg::after{
  content:""; position:absolute; inset:-7px; z-index:1;
  border-radius:var(--egg-r);
  border:1px solid rgba(230,206,150,.34);
  box-shadow:0 0 18px -6px rgba(230,206,150,.35);
  pointer-events:none;
  transition:border-radius 3.4s cubic-bezier(.62,.02,.16,1);
}
/* ВЕНЗЕЛЬ-ГРЕБЕНЬ на короне: овальный камень + две тонкие завитушки */
.egg__crest{
  position:absolute; z-index:6; left:50%; top:0;
  width:56px; height:19px;
  transform:translate(-50%,-64%);
  background:radial-gradient(closest-side at 50% 50%,
     #fff6df 0%, #e6ce96 46%, #a9854a 80%, transparent 81%) 50% 100% / 11px 16px no-repeat;
  filter:drop-shadow(0 2px 3px rgba(5,14,10,.55));
  pointer-events:none;
}
.egg__crest::before,.egg__crest::after{
  content:""; position:absolute; bottom:-3px;
  width:21px; height:15px; border-radius:50%;
  border-top:1.5px solid rgba(233,209,153,.95);
}
.egg__crest::before{ left:1px;  transform:rotate(-26deg); }
.egg__crest::after { right:1px; transform:rotate(26deg); }

/* СТЕКЛО зеркала (вставлено в раму) */
.egg__shell{
  position:absolute; inset:6px; z-index:2;
  border-radius:var(--egg-r);
  overflow:hidden;
  background:radial-gradient(120% 118% at 50% 16%, var(--glass-hi,#eef2f4) 0%, var(--glass-mid,#c9d4dc) 52%, var(--glass-lo,#8f9fac) 100%);
  box-shadow:
    inset 0 2px 10px rgba(255,255,255,.45),
    inset 0 -22px 44px -12px rgba(18,28,44,.5),
    inset 0 0 0 1.5px rgba(201,168,106,.55);
  transition:border-radius 3.4s cubic-bezier(.62,.02,.16,1),
             background 3.4s ease, box-shadow 3.4s ease;
}

/* глубина зеркала: синий «поволок» + угадывающийся силуэт */
.egg__silhouette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(30% 46% at 50% 60%, rgba(24,34,58,.5) 0%, rgba(24,34,58,.16) 46%, transparent 72%),
    radial-gradient(24% 20% at 50% 30%, rgba(20,28,50,.4) 0%, transparent 70%),
    radial-gradient(88% 84% at 50% 42%, var(--haze,rgba(150,178,214,.42)) 0%, transparent 76%),
    linear-gradient(180deg, rgba(20,30,50,.08), rgba(10,16,30,.42));
  transition:opacity .8s ease;
}

/* картинка ученицы / Лео (плейсхолдер — под замену Лео) */
.egg__photo{
  position:absolute; inset:0; z-index:2;
  background-size:cover; background-position:50% 22%;
  opacity:.86;
  filter:saturate(.9) brightness(.98) contrast(1.02);
  mix-blend-mode:luminosity;
  transition:opacity .8s ease, filter .8s ease;
}

/* сетка-«трельяж» — сохранена, сделана прозрачной (Лео просил оставить) */
.egg__lattice{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg,  rgba(201,168,106,.28) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, rgba(201,168,106,.28) 0 1px, transparent 1px 26px);
  opacity:.5;
  transition:opacity .8s ease;
}

/* синеватый стеклянный блик — переливается НЕ синхронно */
.egg__sheen{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:
    linear-gradient(122deg, transparent 30%, rgba(224,238,255,.30) 46%, transparent 62%),
    radial-gradient(42% 28% at 30% 14%, rgba(255,255,255,.5), transparent 62%),
    radial-gradient(36% 46% at 52% 104%, rgba(40,60,96,.22), transparent 66%);
  mix-blend-mode:screen;
  animation:egg-sheen var(--shdur,9s) ease-in-out var(--shdelay,0s) infinite;
}

/* СВЕТЯЩАЯСЯ PLAY-КНОПКА «ВИДЕО» — пилюля с иконкой ▶ (мерцает лениво, вразнобой) */
.egg__video{
  position:absolute; z-index:7;
  left:var(--sx,50%); top:var(--sy,105%);
  transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; gap:9px;
  padding:5px 15px 5px 5px; border:0; cursor:pointer;
  border-radius:999px;
  background:rgba(9,26,20,.66);
  box-shadow:inset 0 0 0 1px rgba(201,168,106,.6), 0 9px 22px -12px rgba(0,0,0,.85);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  -webkit-tap-highlight-color:transparent;
  /* по умолчанию (зеркало-картинка) кнопка скрыта — без перегруза */
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .5s ease .15s, visibility .5s .15s, transform .25s ease, background .25s ease, box-shadow .25s ease;
}
/* кнопка появляется ТОЛЬКО когда зеркало раскрыто в цитату */
.egg.is-quote .egg__video{
  opacity:1; visibility:visible; pointer-events:auto;
}
/* круглый золотой play-значок */
.egg__video-badge{
  width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  color:#0b2018;
  background:radial-gradient(circle at 42% 34%, #fff6df, #e6ce96 50%, #c9a86a 86%);
  box-shadow:0 0 0 3px rgba(201,168,106,.16), 0 0 12px 2px rgba(230,206,150,.55);
  animation:egg-videoglow var(--spkdur,3.6s) ease-in-out var(--spkdelay,0s) infinite;
}
.egg__video-badge svg{ width:14px; height:14px; margin-left:2px; display:block; }
.egg__video-label{
  font-family:'EB Garamond',Georgia,serif; font-style:italic;
  font-size:.92rem; letter-spacing:.02em; color:#F3ECDC; white-space:nowrap;
  text-shadow:0 1px 5px rgba(6,16,11,.75);
  transition:color .25s ease;
}
.egg__video:hover, .egg__video:focus-visible{
  transform:translate(-50%,-50%) scale(1.05);
  background:rgba(201,168,106,.26);
  box-shadow:inset 0 0 0 1px rgba(230,206,150,.95), 0 13px 28px -12px rgba(0,0,0,.92);
  outline:none;
}
.egg__video:hover .egg__video-badge,
.egg__video:focus-visible .egg__video-badge{
  box-shadow:0 0 0 4px rgba(201,168,106,.32), 0 0 20px 5px rgba(230,206,150,.95);
}
.egg__video:hover .egg__video-label,
.egg__video:focus-visible .egg__video-label{ color:#fff; }
@keyframes egg-videoglow{
  0%,100%{ box-shadow:0 0 0 3px rgba(201,168,106,.14), 0 0 8px 1px rgba(230,206,150,.42); }
  50%    { box-shadow:0 0 0 4px rgba(201,168,106,.26), 0 0 18px 5px rgba(230,206,150,.88); }
}

/* подпись-плейсхолдер (для замены Лео) — видна на наведении в режиме картинки */
.egg__tag{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  padding:24px 12px 11px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.6rem; letter-spacing:.05em; color:rgba(243,236,220,.92);
  background:linear-gradient(to top, rgba(10,20,34,.72), transparent);
  opacity:0; transition:opacity .6s ease; pointer-events:none;
}
.egg:not(.is-quote):hover .egg__tag{opacity:1;}

/* ЦИТАТА «Из записок Лафайетте» */
.egg__quote{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; justify-content:center; gap:11px;
  padding:24px 26px; text-align:left;
  opacity:0; transform:translateY(6px);
  transition:opacity 1.6s ease .6s, transform 2.4s cubic-bezier(.22,.61,.36,1) .6s;
  pointer-events:none;
}
.egg__kicker{
  font-family:var(--f-sans,'Mulish',sans-serif);
  font-size:.6rem; font-weight:800; letter-spacing:.24em; text-transform:uppercase;
  /* тёмная антикварная бронза — читается на кремовой карточке (было светлое золото — сливалось с фоном) */
  color:#6b4e12;
}
.egg__text{
  font-family:'EB Garamond',Georgia,serif; font-style:italic;
  font-size:var(--qfs,.95rem); line-height:1.42; color:#26313f;
  text-wrap:pretty;
}

/* ---------- состояние «цитата»: морф овал → прямоугольник ---------- */
.egg.is-quote::before{
  border-radius:20px;
  background:
    conic-gradient(from 128deg, #b6935a, #f3e1b0 20%, #cbaa6e 42%, #9a7a3e 60%, #ecd69e 80%, #ab8a4d 100%);
}
.egg.is-quote::after{ border-radius:26px; }
.egg.is-quote .egg__shell{
  border-radius:16px;
  background:linear-gradient(162deg, #f8efda 0%, #efe1c2 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 0 0 2px rgba(201,168,106,.4),
    0 16px 28px -18px rgba(6,17,12,.48);
}
.egg.is-quote .egg__silhouette{opacity:0;}
.egg.is-quote .egg__photo{opacity:.05; filter:blur(3px) saturate(.5);}
.egg.is-quote .egg__lattice{opacity:.12;}
.egg.is-quote .egg__sheen{opacity:.22;}
.egg.is-quote .egg__quote{opacity:1; transform:translateY(0);}

@media (min-width:901px){
  .egg.is-quote{ width:var(--qw,318px); height:var(--qh,256px); z-index:6; }
}

/* ---------- появление по волне слогана ---------- */
.velvet.wave-armed .egg{opacity:0;}
.velvet.wave-armed .egg.wave-lit{
  animation:egg-bob var(--bob,15s) ease-in-out var(--bd,0s) infinite,
            egg-emerge 1.2s cubic-bezier(.22,.61,.36,1) forwards;
}
/* transition/animation-proof fallback: force mirrors visible if the wave stalled */
.velvet.wave-done .egg{opacity:1!important;animation:egg-bob var(--bob,15s) ease-in-out var(--bd,0s) infinite!important;}
@keyframes egg-emerge{from{opacity:0; scale:.88;} to{opacity:1; scale:1;}}

@keyframes egg-bob{ 0%,100%{translate:0 0;} 50%{translate:0 -7px;} }
@keyframes egg-halo{ 0%,100%{opacity:.28;} 50%{opacity:.5;} }
@keyframes egg-sheen{
  0%,100%{opacity:.45; transform:translateX(-4%);}
  50%    {opacity:.9;  transform:translateX(4%);}
}
@keyframes egg-spark{
  0%,100%{opacity:.5;  transform:scale(.85);}
  50%    {opacity:1;   transform:scale(1.18);}
}

/* ---------- раскладка 4 зеркал вокруг лого (десктоп) ----------
   Оттенки РАЗНЫЕ (перламутр/синь) · тайминги перелива и мерцания НЕ совпадают. */
.egg--1{ /* ученица · перламутр-холод */
  --x:15%; --y:33%; --bob:15s; --bd:0s;
  --glass-hi:#f1f4f5; --glass-mid:#cfd9de; --glass-lo:#94a3ad;
  --haze:rgba(150,178,214,.34); --halo:rgba(180,200,224,.4);
  --shdur:9s; --shdelay:0s; --spkdur:3.4s; --spkdelay:0s; }
.egg--2{ /* ученица · синь */
  --x:13%; --y:73%; --bob:17s; --bd:-4s; --qh:288px; --qfs:.82rem;
  --glass-hi:#e7eef6; --glass-mid:#b7c8de; --glass-lo:#7d92ac;
  --haze:rgba(120,150,200,.44); --halo:rgba(150,178,220,.42);
  --shdur:12s; --shdelay:-3s; --spkdur:4.2s; --spkdelay:-1.4s; }
.egg--3{ /* ученица · шампань-перламутр */
  --x:85%; --y:33%; --bob:16s; --bd:-8s;
  --glass-hi:#f5efe1; --glass-mid:#dccdb0; --glass-lo:#a9986f;
  --haze:rgba(196,196,180,.34); --halo:rgba(201,168,106,.4);
  --shdur:10.5s; --shdelay:-5s; --spkdur:3.9s; --spkdelay:-2.2s; }
.egg--4{ /* Лео · серебристо-синь */
  --x:87%; --y:73%; --bob:18s; --bd:-12s;
  --glass-hi:#eef1f3; --glass-mid:#c2ccce; --glass-lo:#8c979a;
  --haze:rgba(140,164,190,.36); --halo:rgba(170,186,200,.4);
  --shdur:13.5s; --shdelay:-7s; --spkdur:4.6s; --spkdelay:-3.1s; }

/* ---------- мобайл-фёрст: 2×2 сетка под лого ---------- */
@media (max-width:900px){
  .hero{ display:flex; flex-direction:column; align-items:center; }
  .hero > .wrap{ order:1; }
  .eggs{
    position:static; order:2; z-index:1;
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start; gap:64px 28px;
    width:100%; max-width:392px; margin:36px auto 0;
    pointer-events:auto;
  }
  .egg{
    position:relative; transform:none; left:auto; top:auto;
    width:100%; height:auto; aspect-ratio:4/5; margin:0;
    animation:none; transition:min-height .4s ease;
  }
  .egg__halo{ display:none; }
  .egg__video{ top:calc(100% + 12px); }
  .egg__video-label{ font-size:.86rem; }
  /* На телефоне цитата раскрывается ПОД СВОЙ текст, а кикер «Из записок
     Лафайетте» держится сверху и не обрезается. Раньше карточка имела
     фиксированную высоту + justify-content:center — при длинной цитате верх
     (кикер) уезжал за край overflow:hidden. Теперь: высота по контенту,
     выравнивание по верху. */
  /* Морф в цитату: НЕ трогаем shell/photo — они остаются absolute и
     заполняют карточку целиком, поэтому фото просто «испаряется» на
     месте, не сдвигаясь и не меняя форму. Высоту карточки задаёт
     единственный flow-элемент — сама цитата (position:relative),
     поэтому любой текст помещается без обрезки, а стекло/фото/рама
     всегда концентричны. */
  /* Стекло в ПОТОКЕ (position:relative) — его высоту задаёт цитата
     внутри, а высота стекла задаёт высоту карточки. Фото/силуэт/сетка
     остаются absolute inset:0 внутри стекла — то есть фото ВСЕГДА
     заполняет карточку на всю ширину и просто «испаряется», не
     сдвигаясь в полоску. Рама (::before/::after, absolute) заполняет яйцо
     — всё концентрично. padding:6px на яйце = золотой зазор рамы. */
  .egg.is-quote{ aspect-ratio:auto; height:auto; padding:6px; }
  .egg.is-quote .egg__shell{ position:relative; display:block; inset:auto; width:auto; height:auto; }
  .egg.is-quote .egg__quote{
    position:relative; inset:auto;
    justify-content:flex-start; padding:16px 15px 18px; gap:7px;
  }
  .egg.is-quote::before,.egg.is-quote .egg__shell{ border-radius:16px; }
  .egg.is-quote::after{ border-radius:20px; }
  .egg__kicker{ font-size:.58rem; letter-spacing:.2em; }
  .egg__text{ font-size:.84rem; }
  .egg--2 .egg__text{ font-size:.8rem; }

  /* ── ЧИСТЫЙ МОРФ зеркало→цитата на телефоне ──────────────────
     Баг был: карточка мгновенно вырастала в прямоугольник, а рама
     (border-radius) доезжала 3.4s и фото «плыло» под background-size:cover —
     казалось, что картинка съезжает вправо. Решение: короткий
     синхронный морф формы (~0.4s), фото гаснет быстрее формы (не
     успевает «плыть»), цитата плавно проявляется; рама и стекло всегда
     концентричны. */
  .egg,
  .egg::before,
  .egg::after,
  .egg__shell{
    transition:border-radius 1.2s cubic-bezier(.4,0,.2,1),
               background 1.2s ease, box-shadow 1.2s ease;
  }
  .egg__photo{ transition:opacity .36s ease; }
  .egg__silhouette,.egg__lattice,.egg__sheen{ transition:opacity .84s ease; }
  .egg__quote{ transition:opacity 1.26s ease .24s, transform 1.26s ease .24s; }
  .egg.is-quote .egg__photo{ opacity:0; }
}
@media (max-width:420px){
  .eggs{ max-width:340px; gap:60px 26px; }
}

/* ---------- reduced-motion / слабые устройства: без морфа и автосмены ---------- */
@media (prefers-reduced-motion:reduce){
  .egg, .egg__halo, .egg__sheen, .egg__video-badge{ animation:none !important; }
  .egg{ transition:none !important; }
  .egg.is-quote{ width:var(--w,168px) !important; height:var(--h,214px) !important; }
  .egg.is-quote::before,.egg.is-quote::after,.egg.is-quote .egg__shell{ border-radius:var(--egg-r) !important; }
  .egg__quote, .egg__photo, .egg__lattice, .egg__sheen, .egg__silhouette{ transition:opacity .25s ease !important; }
  .velvet.wave-armed .egg{ opacity:1 !important; }
}