/* ============================================================
   splash.css — входният overlay ВЪРХУ началната страница.
   Съдържанието на началната е в DOM-а от първия байт; splash-ът
   само стои отгоре. Никакъв скрит текст, никакъв cloaking.
   ============================================================ */

#splash{
  position:fixed; inset:0; z-index:200;
  /* СВЕТЛА тема — топло кремаво, за да изпъкне златното лого */
  background:
    radial-gradient(circle at 50% 40%, #FFFBF6 0%, #F8EEE4 46%, #EFDCCE 100%);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:0; width:100%;
  padding:24px;
  /* при силен зуум (особено зуум само на текста) съдържанието може да
     надхвърли екрана — тогава splash-ът сам става скролируем, вместо
     да отреже логото или надписа. */
  overflow-y:auto;
  overscroll-behavior:contain;
  transition:opacity .7s ease, visibility .7s ease;
}
#splash[hidden]{display:none;}          /* fallback без CSS transitions */
#splash.is-gone{
  opacity:0; visibility:hidden; pointer-events:none;
}

/* Глобалният :focus-visible в base.css е с outline-offset:3px — при
   position:fixed;inset:0 това рисува очертанието ИЗВЪН екрана и то е
   невидимо. Затова тук offset-ът е отрицателен. */
#splash:focus-visible{
  outline:3px solid rgba(166,134,86,.85);
  outline-offset:-6px;
}

/* ── Лого-блокът на splash-а ──────────────────────────────────
   Картинка е само кръгът с "SD" (logo-splash-circle.*) — самата
   маркировка/лого. "Academy", "Medical Aesthetics" и
   "Dermatopigmentation" са ЖИВ текст (.splash-line), с шрифт
   Ibarra Real Nova italic 500 (виж fonts.css), за да могат да се
   подредят и стилизират свободно.

   РЕЗЕРВ: по-старият вариант, при който "Academy" и "Medical
   Aesthetics" бяха вградени в самата картинка на логото (курсивен
   серифен шрифт, идентичен с "SD"), е запазен непокътнат на диска —
   images/logo-splash.png/.webp/.avif(+mask) и
   images/logo-splash-tail.*(+mask). Ако потрябва връщане назад:
   замени logo-splash-circle.* обратно с logo-splash.* в img/picture
   по-долу в index.html, върни #logo-gold-2 блока с втора картинка
   (вж. история на файла) и премахни/скрий .splash-line редовете. */
.splash-lockup{
  position:relative; z-index:2; display:flex; flex-direction:column;
  align-items:center;
  --lockup-w:min(62vw,46vh,480px);
  width:var(--lockup-w);
}
.logo-gold-piece{display:block; width:100%;}
.logo-gold-piece picture,
.logo-gold-piece img{display:block; width:100%; height:auto;}

/* ── Градиент/плътен цвят върху логото ───────────────────────
   Логото е PNG, не текст, затова background-clip:text не върши
   работа. Същият ефект се постига с маска: PNG-то дава формата
   (алфа канала), а цветът се излива през нея.

   Смяна на нюанса = само редът --logo-gold отдолу.
   ──────────────────────────────────────────────────────── */
.logo-gold-piece{
  position:relative;
  --logo-gold:linear-gradient(135deg,#8C6221 0%,#FFF2B2 50%,#D1A153 100%);
  /* По-контрастен вариант за СВЕТЛИЯ фон — бледото #FFF2B2 в средата
     почти се слива с кремавото. Разкоментирай, ако логото ти изглежда
     измито (измерено: 59 % от пикселите му са на по-малко от 30 нюанса
     от фона при горния градиент):
  --logo-gold:linear-gradient(135deg,#7A5219 0%,#E3C071 48%,#A9803A 100%);
  */
  filter:drop-shadow(0 2px 4px rgba(140,98,33,.30))
         drop-shadow(0 10px 26px rgba(122,84,20,.16));
}

/* Ако браузърът не поддържа маски, остава златното PNG — коректен
   резервен вариант, а не празно място. */
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  #logo-gold::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image:var(--logo-gold);
    -webkit-mask:url(../images/logo-splash-circle-mask.png) center/contain no-repeat;
          mask:url(../images/logo-splash-circle-mask.png) center/contain no-repeat;
  }
  .logo-gold-piece img{visibility:hidden;}   /* пази мястото, без да се вижда */
}
/* Трите реда под логото — "Academy" / "Medical Aesthetics" /
   "Dermatopigmentation", в тази последователност, всички в еднакъв
   размер за симетрия. font-size е обвързан директно с width на
   .splash-lockup (--lockup-w), за да се мащабира с абсолютно същия
   коефициент като логото на всякакъв размер екран (не просто
   vw/rem clamp, който се разминава на много малки/големи екрани). */
.splash-line{
  margin:6px 0; white-space:nowrap;
  font-family:'Ibarra Real Nova', var(--font-serif); font-style:italic; font-weight:500;
  font-size:calc(var(--lockup-w) * 0.072); letter-spacing:.02em;
  text-align:center;
  color:#A9803A;
}
#splash.splash--dark .splash-line{color:#FDF8ED;}

#splash-hint{
  position:absolute; bottom:8vh; left:50%; transform:translateX(-50%);
  z-index:2; font-family:var(--font-sans);
  font-size:.76rem; letter-spacing:.32em; text-transform:uppercase;
  color:rgba(122,44,2,.62);
  /* БЕЗ white-space:nowrap — при увеличен текст надписът трябва да
     може да се пренесе, а не да излиза извън екрана. */
  max-width:min(90vw,420px); text-align:center; margin:0;
  animation:sdBlink 2.5s ease-in-out infinite;
}
@keyframes sdBlink{0%,100%{opacity:.3;}50%{opacity:.85;}}

/* ── ПАДАЩОТО ПЕРО ───────────────────────────────────────────
   Живее ВЪТРЕ в splash-а и изчезва заедно с него.

   Вертикалното падане и страничното люлеене са РАЗДЕЛЕНИ на два
   елемента. Причината: при една обща анимация с ease-in-out
   браузърът намалява скоростта до нула при ВСЕКИ ключов кадър —
   включително по вертикала — и перото „засича“ при всяка смяна на
   посоката настрани.

   Тук <picture> пада равномерно (linear), а <img> вътре само се
   люлее и върти (ease-in-out + alternate) — както прави махало:
   бавно в крайните точки, бързо в средата. Двата периода нарочно
   НЕ са кратни (16s и 5.2s), за да не се получи механично
   повторение на едно и също движение.
   ──────────────────────────────────────────────────────── */
#feather-layer{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;}

#feather-layer picture{
  position:absolute; right:6vw; top:0; display:block;
  /* безкрайна анимация → предварително качване в собствен GPU слой,
     за да няма потрепване на първия кадър. Само на този елемент —
     will-change струва памет и не бива да се пилее. */
  will-change:transform, opacity;
  animation:sdFallY 16s linear infinite;
}
#feather-layer img{
  display:block;
  width:clamp(190px,30vw,360px);
  will-change:transform;
  animation:sdSway 5.2s ease-in-out infinite alternate;
  filter:drop-shadow(0 6px 14px rgba(122,84,20,.16));
}

/* Само вертикала + появяване/изчезване. Междинните кадри задават
   САМО opacity — така transform интерполира линейно от 0% до 100%
   и скоростта на падане остава постоянна през целия път. */
@keyframes sdFallY{
  0%   {transform:translate3d(0,-32vh,0); opacity:0;}
  7%   {opacity:.88;}
  88%  {opacity:.82;}
  100% {transform:translate3d(0,108vh,0); opacity:0;}
}
/* Само странично + завъртане. alternate → връща се назад по същия път. */
@keyframes sdSway{
  from{transform:translate3d(-3.5vw,0,0) rotate(-7deg);}
  to  {transform:translate3d(3.5vw,0,0)  rotate(7deg);}
}
/* на тесен екран 3.5vw са едва няколко пиксела — люлеенето изчезва */
@media(max-width:600px){
  @keyframes sdSway{
    from{transform:translate3d(-5vw,0,0) rotate(-8deg);}
    to  {transform:translate3d(5vw,0,0)  rotate(8deg);}
  }
}

/* докато splash-ът е отгоре — без скролване отдолу */
body.splash-open{overflow:hidden;}

@media(prefers-reduced-motion:reduce){
  /* анимация няма → will-change се изключва, за да не заделя слой напразно */
  #feather-layer picture{
    animation:none; will-change:auto;
    transform:translate3d(0,18vh,0); opacity:.7;
  }
  #feather-layer img{animation:none; will-change:auto;}
  #splash-hint{opacity:.7; animation:none;}
  #splash{transition:none;}
}

/* ── ТЪМЕН ВАРИАНТ НА ВХОДНИЯ ЕКРАН ─────────────────────────
   Включва се с един клас в index.html:
       <div id="splash" class="splash--dark" ...>
   Полезен е, ако перото трябва да стои върху тъмно — тогава
   меките му ръбове изобщо не се четат като изрязване.
   ──────────────────────────────────────────────────────── */
#splash.splash--dark{
  /* топла тъмна основа с леки кафяво-маслинени (зеленикави) нюанси,
     не чисто черно — временен избор, за уточняване по-нататък. */
  background:
    radial-gradient(circle at 50% 40%, #26221A 0%, #1E1B14 55%, #15130E 100%);
}
#splash.splash--dark .logo-gold-piece{
  /* Кремаво-бяла версия по молба на Станислава (~#FDF8ED), с лек
     деграде за обем вместо плосък цвят. РЕЗЕРВЕН по-стар вариант
     (по-наситено злато) е запазен по-долу закоментиран — ако поиска
     да се върнем към него, просто размени коя от двете е активна.
  --logo-gold:linear-gradient(135deg,#8C6221 0%,#E8C878 48%,#C2933D 100%);
  */
  --logo-gold:linear-gradient(135deg,#F2E9D5 0%,#FDF8ED 50%,#ECE0C3 100%);
  filter:drop-shadow(0 12px 34px rgba(0,0,0,.55));
}
#splash.splash--dark #splash-hint{
  color:rgba(224,200,150,.55);
}
#splash.splash--dark #feather-layer img{
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.45));
}
#splash.splash--dark:focus-visible{
  outline-color:rgba(224,200,150,.8);
}