/* ============================================================
   TOKA Studio — Кинематографичное 3D-интро
   Самодостаточное, без внешних библиотек. GPU-friendly.
   ============================================================ */

.intro-stage {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 38%, #0b1030 0%, #060814 46%, #030409 100%);
  opacity: 1;
  transition: opacity .9s cubic-bezier(.6,.01,.2,1), transform 1s cubic-bezier(.6,.01,.2,1), filter .9s ease;
  will-change: opacity, transform;
  -webkit-tap-highlight-color: transparent;
}
.intro-stage.intro-hidden { display: none; }
.intro-stage.intro-out {
  opacity: 0;
  transform: scale(1.12);
  filter: blur(6px);
  pointer-events: none;
}

#introCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.intro-glow {
  position: absolute;
  width: min(920px, 120vw);
  height: min(920px, 120vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(64,120,255,.28), rgba(150,64,255,.12) 42%, transparent 66%);
  filter: blur(30px);
  opacity: 0;
  animation: introGlow 3.4s ease-out .2s forwards;
  pointer-events: none;
}
.intro-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 50%, transparent 52%, rgba(2,3,10,.72) 100%);
  pointer-events: none;
}

.intro-core {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  perspective: 1400px;
  perspective-origin: 50% 44%;
  padding: 0 24px;
}

/* ---------- Объёмный логотип ---------- */
.intro-logo3d {
  position: relative;
  width: min(340px, 62vw);
  height: min(340px, 62vw);
  transform-style: preserve-3d;
  transform: none;
  opacity: 1;
  animation: introLogoFloat 7s ease-in-out 2.5s infinite;
  will-change: transform;
}
.intro-logo3d .il {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  backface-visibility: hidden;
}
/* Прозрачный логотип-ориентир: во время сборки еле виден, в конце становится плотным и заливает швы. */
.il-target {
  transform: translateZ(50px);
  opacity: 0;
  animation: introTargetGhost 2.3s ease-out .2s forwards;
  filter:
    drop-shadow(0 0 22px rgba(40,203,255,.42))
    drop-shadow(0 0 46px rgba(82,93,255,.5))
    drop-shadow(0 0 90px rgba(197,65,255,.28));
}

/* Части логотипа, которые слетаются из глубины и склеиваются */
.il-frag {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: url('./src/assets/toka-icon-clean-hq.webp') center / contain no-repeat;
  opacity: 0;
  backface-visibility: hidden;
  will-change: transform, opacity;
  filter:
    drop-shadow(0 0 18px rgba(40,203,255,.4))
    drop-shadow(0 0 40px rgba(120,90,255,.32));
}
.il-frag.f-tl { clip-path: polygon(0 0, 50% 0, 50% 50%, 0 50%);            animation: introFragTL 1.55s cubic-bezier(.2,.85,.25,1) .3s forwards; }
.il-frag.f-tr { clip-path: polygon(50% 0, 100% 0, 100% 50%, 50% 50%);      animation: introFragTR 1.55s cubic-bezier(.2,.85,.25,1) .45s forwards; }
.il-frag.f-br { clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%); animation: introFragBR 1.55s cubic-bezier(.2,.85,.25,1) .6s forwards; }
.il-frag.f-bl { clip-path: polygon(0 50%, 50% 50%, 50% 100%, 0 100%);      animation: introFragBL 1.55s cubic-bezier(.2,.85,.25,1) .75s forwards; }

/* Вспышка «склейки», когда части сошлись */
.il-weld {
  position: absolute;
  inset: -10%;
  transform: translateZ(70px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.92), rgba(120,180,255,.4) 38%, transparent 68%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  animation: introWeld 1.1s ease-out 1.95s;
}
.il-depth-1 { transform: translateZ(24px) translate(6px, 8px);  opacity: .34; filter: blur(1px) hue-rotate(6deg); }
.il-depth-2 { transform: translateZ(-18px) translate(13px, 18px); opacity: .2;  filter: blur(3px) hue-rotate(14deg); }
.il-depth-3 { transform: translateZ(-58px) translate(22px, 30px); opacity: .12; filter: blur(6px) saturate(1.5); }
.il-shine {
  position: absolute;
  inset: 6%;
  transform: translateZ(78px);
  border-radius: 50%;
  background: linear-gradient(125deg, transparent 34%, rgba(255,255,255,.5) 48%, transparent 60%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: introShine 2.6s ease-in-out 1.4s infinite;
  pointer-events: none;
}

/* ---------- Орбитальные кольца ---------- */
.intro-rings {
  position: absolute;
  top: min(170px, 31vw);
  left: 50%;
  width: min(340px, 62vw);
  height: min(340px, 62vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.intro-rings span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(120,150,255,.28);
  opacity: 0;
  animation: introRing 3s ease-out forwards;
}
.intro-rings span:nth-child(1) { animation-delay: .6s; }
.intro-rings span:nth-child(2) { animation-delay: 1s; border-color: rgba(190,120,255,.24); }
.intro-rings span:nth-child(3) { animation-delay: 1.4s; border-color: rgba(80,210,255,.2); }

/* ---------- Слово-логотип ---------- */
.intro-word {
  margin-top: 34px;
  display: flex;
  gap: 2px;
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 5.4vw, 40px);
  letter-spacing: .2em;
  color: #fff;
}
.intro-word .gap { width: .5em; }
.intro-word span {
  display: inline-block;
  opacity: 0;
  transform: translateY(22px) rotateX(-90deg);
  transform-origin: 50% 100%;
  animation: introLetter .7s cubic-bezier(.2,.8,.2,1) forwards;
  text-shadow: 0 0 18px rgba(90,140,255,.5);
}
.intro-word span:nth-child(1) { animation-delay: 1.9s; }
.intro-word span:nth-child(2) { animation-delay: 1.98s; }
.intro-word span:nth-child(3) { animation-delay: 2.06s; }
.intro-word span:nth-child(4) { animation-delay: 2.14s; }
.intro-word span:nth-child(6) { animation-delay: 2.26s; }
.intro-word span:nth-child(7) { animation-delay: 2.34s; }
.intro-word span:nth-child(8) { animation-delay: 2.42s; }
.intro-word span:nth-child(9) { animation-delay: 2.5s; }
.intro-word span:nth-child(10) { animation-delay: 2.58s; }
.intro-word span:nth-child(11) { animation-delay: 2.66s; }

.intro-tag {
  margin-top: 14px;
  font-size: clamp(9px, 1.6vw, 11px);
  letter-spacing: .42em;
  color: #8590bd;
  opacity: 0;
  animation: introFadeUp .9s ease 2.9s forwards;
}

.intro-progress {
  margin-top: 30px;
  width: min(220px, 60vw);
  height: 2px;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  opacity: 0;
  animation: introFadeUp .6s ease 1.1s forwards;
}
.intro-progress i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #c25bff, #645cff, #24d7ff);
  box-shadow: 0 0 16px rgba(66,174,255,.75);
  animation: introBar 2.6s cubic-bezier(.5,0,.2,1) 1.1s forwards;
}

.intro-skip {
  position: absolute;
  right: 26px;
  bottom: 24px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: #c7cef0;
  font-size: 12px;
  letter-spacing: .04em;
  cursor: pointer;
  opacity: 0;
  backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s, transform .2s;
  animation: introFadeUp .6s ease 1.6s forwards;
}
.intro-skip span { transition: transform .2s; }
.intro-skip:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.3); }
.intro-skip:hover span { transform: translateX(4px); }

.intro-error .intro-progress i { background: #ff6685; box-shadow: none; animation: none; width: 100%; }

/* ---------- Сборка логотипа: части летят с разных сторон в центр и склеиваются ---------- */
/* Прячем только смещённые призрачные копии (они давали «двойное изображение») */
.intro-logo3d .il-depth-1,
.intro-logo3d .il-depth-2,
.intro-logo3d .il-depth-3 { display: none !important; }
.intro-logo3d .il-frag { display: block !important; }
.intro-logo3d .il-weld { display: block !important; }

/* Четыре части прилетают из своих углов и сходятся в центре */
.il-frag.f-tl { animation: asmTL 1.4s cubic-bezier(.18,.86,.26,1) .15s both !important; }
.il-frag.f-tr { animation: asmTR 1.4s cubic-bezier(.18,.86,.26,1) .3s both !important; }
.il-frag.f-br { animation: asmBR 1.4s cubic-bezier(.18,.86,.26,1) .45s both !important; }
.il-frag.f-bl { animation: asmBL 1.4s cubic-bezier(.18,.86,.26,1) .6s both !important; }
@keyframes asmTL {
  0%   { opacity: 0; transform: translate3d(-155%, -180%, -300px) rotate(-45deg) scale(.45); filter: blur(7px); }
  55%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translate3d(0,0,0) rotate(0) scale(1); filter: blur(0); }
}
@keyframes asmTR {
  0%   { opacity: 0; transform: translate3d(165%, -170%, -300px) rotate(42deg) scale(.45); filter: blur(7px); }
  55%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translate3d(0,0,0) rotate(0) scale(1); filter: blur(0); }
}
@keyframes asmBR {
  0%   { opacity: 0; transform: translate3d(165%, 180%, -300px) rotate(45deg) scale(.45); filter: blur(7px); }
  55%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translate3d(0,0,0) rotate(0) scale(1); filter: blur(0); }
}
@keyframes asmBL {
  0%   { opacity: 0; transform: translate3d(-165%, 170%, -300px) rotate(-42deg) scale(.45); filter: blur(7px); }
  55%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translate3d(0,0,0) rotate(0) scale(1); filter: blur(0); }
}

/* Вспышка склейки в момент, когда части сошлись */
.il-weld { animation: introWeldFlash 1s ease-out 1.85s both !important; }
@keyframes introWeldFlash {
  0%   { opacity: 0; transform: translateZ(70px) scale(.35); }
  40%  { opacity: .95; }
  100% { opacity: 0; transform: translateZ(70px) scale(1.3); }
}

/* Чёткий логотип проявляется поверх и заливает швы */
.il-target { animation: introTargetGlue 1s ease-out 1.8s both !important; }
@keyframes introTargetGlue {
  0%   { opacity: 0; transform: translateZ(50px) scale(.985); }
  100% { opacity: 1; transform: translateZ(50px) scale(1); filter: drop-shadow(0 0 22px rgba(40,203,255,.42)) drop-shadow(0 0 46px rgba(82,93,255,.5)) drop-shadow(0 0 90px rgba(197,65,255,.28)); }
}

/* ---------- Keyframes ---------- */
@keyframes introLogoIn {
  0%   { transform: translateZ(-620px) rotateY(75deg) rotateX(-8deg) scale(.35); opacity: 0; filter: blur(8px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { transform: translateZ(0) rotateY(0) rotateX(0) scale(1); opacity: 1; filter: blur(0); }
}
@keyframes introLogoFloat {
  0%,100% { transform: translate3d(0,0,0) rotateX(2deg) rotateY(-4deg); }
  50%     { transform: translate3d(0,-14px,0) rotateX(-3deg) rotateY(5deg); }
}
@keyframes introShine {
  0%   { opacity: 0; transform: translateZ(78px) translateX(-40%) rotate(8deg); }
  40%  { opacity: .85; }
  70%  { opacity: 0; }
  100% { opacity: 0; transform: translateZ(78px) translateX(45%) rotate(8deg); }
}
@keyframes introRing {
  0%   { opacity: 0; transform: scale(.35); }
  35%  { opacity: .9; }
  100% { opacity: 0; transform: scale(1.6); }
}
@keyframes introLetter {
  to { opacity: 1; transform: translateY(0) rotateX(0); }
}
@keyframes introFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes introGlow {
  0%   { opacity: 0; transform: scale(.6); }
  55%  { opacity: 1; }
  100% { opacity: .82; transform: scale(1); }
}
@keyframes introBar {
  0%   { width: 0; }
  70%  { width: 82%; }
  100% { width: 100%; }
}

@media (max-width: 640px) {
  .intro-word { letter-spacing: .14em; }
  .intro-skip { right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-logo3d {
    transform: none;
    opacity: 1;
    animation: introFadeUp .5s ease forwards;
  }
  .il-shine, .intro-rings span { animation: none; opacity: 0; }
  .intro-word span { opacity: 1; transform: none; animation: none; }
  .intro-tag, .intro-progress, .intro-skip { opacity: 1; animation: none; }
  .intro-progress i { width: 100%; animation: none; }
  .intro-stage { transition: opacity .4s ease; }
  .intro-stage.intro-out { transform: none; filter: none; }
}

/* ===== Keyframes: сборка логотипа по частям ===== */
@keyframes introTargetGhost {
  0%   { opacity: 0; }
  30%  { opacity: .16; }
  72%  { opacity: .22; }
  100% { opacity: 1; }
}
@keyframes introFragTL {
  0%   { opacity: 0; transform: translate3d(-165px,-150px,-300px) rotate(-48deg) scale(.5); }
  50%  { opacity: 1; }
  78%  { transform: translate3d(7px,7px,92px) rotate(4deg) scale(1.035); }
  100% { opacity: 1; transform: translate3d(0,0,60px) rotate(0) scale(1); }
}
@keyframes introFragTR {
  0%   { opacity: 0; transform: translate3d(170px,-140px,-320px) rotate(46deg) scale(.5); }
  50%  { opacity: 1; }
  78%  { transform: translate3d(-7px,7px,92px) rotate(-4deg) scale(1.035); }
  100% { opacity: 1; transform: translate3d(0,0,60px) rotate(0) scale(1); }
}
@keyframes introFragBR {
  0%   { opacity: 0; transform: translate3d(150px,160px,-300px) rotate(38deg) scale(.5); }
  50%  { opacity: 1; }
  78%  { transform: translate3d(-7px,-7px,92px) rotate(-4deg) scale(1.035); }
  100% { opacity: 1; transform: translate3d(0,0,60px) rotate(0) scale(1); }
}
@keyframes introFragBL {
  0%   { opacity: 0; transform: translate3d(-150px,150px,-340px) rotate(-40deg) scale(.5); }
  50%  { opacity: 1; }
  78%  { transform: translate3d(7px,-7px,92px) rotate(4deg) scale(1.035); }
  100% { opacity: 1; transform: translate3d(0,0,60px) rotate(0) scale(1); }
}
@keyframes introWeld {
  0%   { opacity: 0; transform: translateZ(70px) scale(.4); }
  45%  { opacity: .9; }
  100% { opacity: 0; transform: translateZ(70px) scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
  .il-frag { opacity: 1; transform: translateZ(60px); animation: none; }
  .il-target { opacity: 1; animation: none; }
  .il-weld { display: none; }
}

/* ============================================================
   V16.10 — безопасное интро для мобильных GPU
   Анимация сохранена, но тяжёлые операции упрощены.
   ============================================================ */
.intro-stage[hidden],
.intro-stage.intro-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.intro-stage.intro-out {
  pointer-events: none !important;
}

@media (max-width: 820px), (pointer: coarse) {
  .intro-stage {
    min-height: 100dvh;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: opacity .32s ease, transform .32s ease;
  }
  .intro-stage.intro-out {
    transform: scale(1.025) translateZ(0);
    filter: none;
  }
  .intro-core {
    perspective: 700px;
    padding: 0 18px;
  }
  .intro-logo3d {
    width: min(270px, 64vw);
    height: min(270px, 64vw);
    transform-style: flat;
    animation: introLogoFloatMobile 6s ease-in-out 2s infinite;
  }
  .intro-logo3d .il,
  .il-frag {
    backface-visibility: visible;
  }
  .il-frag {
    filter: drop-shadow(0 0 12px rgba(52,150,255,.30));
    will-change: opacity, transform;
  }
  .il-target {
    transform: translateZ(0);
    filter: drop-shadow(0 0 16px rgba(50,145,255,.34));
  }
  .il-weld {
    mix-blend-mode: normal;
    background: radial-gradient(circle, rgba(255,255,255,.7), rgba(120,180,255,.22) 40%, transparent 68%);
  }
  .il-shine {
    mix-blend-mode: normal;
    animation-iteration-count: 1;
  }
  .intro-glow {
    width: 115vw;
    height: 115vw;
    filter: blur(18px);
    opacity: .55;
  }
  .intro-vignette {
    background: radial-gradient(120% 90% at 50% 50%, transparent 58%, rgba(2,3,10,.55) 100%);
  }
  .intro-rings span { animation-duration: 2.4s; }
  .intro-word { margin-top: 22px; }
  .intro-progress { margin-top: 22px; }
  .intro-skip {
    min-width: 126px;
    min-height: 44px;
    justify-content: center;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(10,14,31,.84);
    touch-action: manipulation;
  }
  @keyframes introLogoFloatMobile {
    0%,100% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(0,-7px,0) scale(1.01); }
  }
}

.is-low-power .intro-logo3d,
.is-low-power .intro-logo3d .il,
.is-low-power .il-frag,
.is-low-power .intro-rings,
.is-low-power .intro-glow {
  will-change: auto;
}