/* ============================================================
   AKSAL CROWN — vstupná animácia
   Masívne dvojkrídlové drevené dvere s logom, zlatý historický
   kľúč ich odomkne, krídla sa otvoria a kamera prejde dnu.
   Beží raz za návštevu, dá sa preskočiť.
   ============================================================ */

/* podklad natrie stránku hneď, ešte než sa vôbec vykreslí telo */
html.ac-intro-on { overflow: hidden; background: #0d2627; }
html.ac-intro-on body { visibility: hidden; }
html.ac-intro-on .ac-intro { visibility: visible; }

.ac-intro {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: center;
  overflow: hidden;
  /* okolie dverí — hlboká petrolejová s teplým dosvitom */
  background:
    radial-gradient(120% 90% at 50% 52%, rgba(201,164,92,.16), transparent 52%),
    radial-gradient(160% 120% at 50% 50%, #123032 0%, #0d2627 42%, #071819 100%);
  transition: opacity .45s cubic-bezier(.4,0,.2,1);
}
.ac-intro.is-gone { opacity: 0; pointer-events: none; }

/* --- javisko a 3D priestor --- */
.ai-stage { perspective: 1500px; perspective-origin: 50% 50%; }
.ai-room {
  position: relative; transform-style: preserve-3d;
  transform: translateZ(-120px) scale(.965);
  transition: transform 1.6s cubic-bezier(.22,.61,.36,1);
}
.ac-intro.s-in   .ai-room { transform: translateZ(0) scale(1); }
/* kamera prejde dverami */
.ac-intro.s-push .ai-room {
  transform: translateZ(1180px) scale(1.04);
  transition: transform 1.15s cubic-bezier(.55,.02,.72,.55);
}

/* --- rozmer dverí: prispôsobí sa obrazovke --- */
.ai-frame {
  --dw: clamp(220px, min(78vw, 46vh), 420px);   /* šírka dverného otvoru */
  --dh: calc(var(--dw) * 1.52);
  --fr: clamp(16px, calc(var(--dw) * .075), 30px);  /* hrúbka zárubne */
  position: relative; width: var(--dw); height: var(--dh);
  transform-style: preserve-3d;
}

/* --- zárubňa --- */
.ai-jamb, .ai-lintel, .ai-sill {
  position: absolute; z-index: 4;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 1px, transparent 1px 7px),
    linear-gradient(96deg, #1d1108, #402715 42%, #2a1a0d 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), 0 0 26px rgba(0,0,0,.5);
}
.ai-jamb { top: calc(var(--fr) * -1); bottom: calc(var(--fr) * -1); width: var(--fr); }
.ai-jamb.l { left: calc(var(--fr) * -1); }
.ai-jamb.r { right: calc(var(--fr) * -1); }
.ai-lintel { left: calc(var(--fr) * -1); right: calc(var(--fr) * -1);
  top: calc(var(--fr) * -1); height: var(--fr); }
.ai-sill { left: calc(var(--fr) * -1.6); right: calc(var(--fr) * -1.6);
  bottom: calc(var(--fr) * -1); height: calc(var(--fr) * .62);
  background: linear-gradient(180deg, #4a3320, #241609); }

/* ozdobný oblúk s kľúčovým kameňom nad dverami */
.ai-arch {
  position: absolute; z-index: 5;
  left: calc(var(--fr) * -1.75); right: calc(var(--fr) * -1.75);
  top: calc(var(--fr) * -2.15); height: calc(var(--fr) * 1.22);
  border-radius: 50% 50% 0 0 / 88% 88% 0 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 30%),
    linear-gradient(180deg, #6a4526 0%, #4a2e18 52%, #29190b 100%);
  box-shadow: 0 7px 20px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.4);
}
/* zlatá linka po spodnom okraji oblúka */
.ai-arch::before {
  content: ''; position: absolute; left: 4%; right: 4%; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(201,164,92,.75) 18%, rgba(240,215,160,.9) 50%, rgba(201,164,92,.75) 82%, transparent);
}
/* kľúčový kameň */
.ai-arch::after {
  content: ''; position: absolute; left: 50%; bottom: 0;
  width: 13%; height: 128%; transform: translateX(-50%);
  background: linear-gradient(180deg, #7d5530, #3c250f);
  clip-path: polygon(26% 0, 74% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 0 0 1px rgba(201,164,92,.35);
}

/* --- otvor za dverami: svetlo, do ktorého sa vchádza --- */
.ai-opening {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 62%, #fffaf0, #f3e6cd 42%, #b99a63 100%);
}
.ai-opening::after {                       /* mäkký nábeh svetla */
  content: ''; position: absolute; inset: 0;
  background: #0d2627; opacity: .88;
  transition: opacity 1.1s ease-out;
}
.ac-intro.s-open .ai-opening::after { opacity: 0; }

/* dosvit, ktorý sa rozžiari po otvorení */
.ai-glow {
  position: absolute; left: 50%; top: 50%; width: 160%; aspect-ratio: 1;
  transform: translate(-50%,-50%) scale(.3); z-index: 0;
  background: radial-gradient(circle, rgba(255,240,208,.55), rgba(201,164,92,.18) 38%, transparent 66%);
  opacity: 0; transition: opacity 1s ease-out, transform 1.3s cubic-bezier(.22,.61,.36,1);
}
.ac-intro.s-open .ai-glow { opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* --- krídla dverí --- */
.ai-leaf {
  position: absolute; top: 0; height: 100%; width: 50%; z-index: 3;
  transform-style: preserve-3d;
  transition: transform 1.15s cubic-bezier(.62,.02,.28,1);
}
.ai-leaf.l { left: 0;  transform-origin: left center;  }
.ai-leaf.r { right: 0; transform-origin: right center; }
/* Krídla sa otvárajú k divákovi — dovnútra by zapadli za svietiaci otvor.
   Vidíme teda ich odvrátenú stranu, preto backface-visibility ostáva zapnutá.
   68° namiesto pravého uhla: pri 90° je krídlo z profilu a zmizne,
   takto ostane zreteľne vidieť, že sú dvere otvorené. */
.ac-intro.s-open .ai-leaf.l { transform: rotateY(-68deg); }
.ac-intro.s-open .ai-leaf.r { transform: rotateY(68deg); }

/* povrch krídla — masívne drevo so zvislým žilkovaním */
.ai-face {
  position: absolute; inset: 0; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.20) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 3px, transparent 3px 27px),
    linear-gradient(96deg, #24150a 0%, #5c3a21 26%, #6d472a 48%, #4a2d19 72%, #22140a 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 0 40px rgba(0,0,0,.45);
}
/* tieň, ktorý na krídle pribúda, ako sa otáča */
.ai-face::after {
  content: ''; position: absolute; inset: 0; background: #050f10;
  opacity: 0; transition: opacity 1.15s cubic-bezier(.62,.02,.28,1);
}
.ac-intro.s-open .ai-leaf.l .ai-face::after,
.ac-intro.s-open .ai-leaf.r .ai-face::after { opacity: .55; }

/* stredová lišta pri škáre */
.ai-leaf.l .ai-face { box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset -14px 0 22px rgba(0,0,0,.45); }
.ai-leaf.r .ai-face { box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset  14px 0 22px rgba(0,0,0,.45); }

/* --- kazety --- */
.ai-panel {
  position: absolute; left: 13%; right: 13%; border-radius: 2px;
  background: linear-gradient(168deg, rgba(0,0,0,.30), rgba(255,255,255,.06) 42%, rgba(0,0,0,.32));
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.55),
    inset 0 4px 10px rgba(0,0,0,.5),
    0 1px 0 rgba(255,255,255,.07);
}
.ai-panel::before {
  content: ''; position: absolute; inset: 8%;
  background: linear-gradient(150deg, rgba(255,255,255,.08), rgba(0,0,0,.16));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05);
}
.ai-panel.top { top: 6%;  height: 27%; }
.ai-panel.bot { top: 63%; height: 29%; }

/* --- logo rozdelené škárou: pri otvorení sa roztrhne na polovice --- */
.ai-crest {
  position: absolute; top: 44%; width: calc(var(--dw) * .58); height: auto;
  max-width: none;              /* inak ho zreže globálne img{max-width:100%} */
  transform: translateY(-50%); opacity: .92;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
}
.ai-leaf.l .ai-crest { right: calc(var(--dw) * -.29); }
.ai-leaf.r .ai-crest { left:  calc(var(--dw) * -.29); }

/* --- kovanie --- */
.ai-hinge {
  position: absolute; width: 11%; height: 4.4%;
  background: linear-gradient(180deg, #e2c37e, #9b7736 55%, #cfab63);
  box-shadow: 0 1px 2px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.25);
  border-radius: 2px;
}
.ai-leaf.l .ai-hinge { left: 2.5%; }
.ai-leaf.r .ai-hinge { right: 2.5%; }
.ai-hinge.t { top: 12%; } .ai-hinge.m { top: 48%; } .ai-hinge.b { top: 84%; }

.ai-handle {
  position: absolute; top: 56%; width: 9%; aspect-ratio: 1;
  border: 2.5px solid #c9a45c; border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 2px 4px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.3);
}
.ai-leaf.l .ai-handle { right: 13%; }
.ai-leaf.r .ai-handle { left: 13%; }

/* zámok so štítkom presne pri škáre */
.ai-lock {
  position: absolute; top: 56%; left: 0; z-index: 6;
  width: 16%; height: 11%; transform: translate(-4%, -50%);
  background: linear-gradient(180deg, #e8cd8d, #a8853f 52%, #d8b96f);
  border-radius: 44% 44% 46% 46% / 30% 30% 40% 40%;
  box-shadow: 0 2px 5px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.3);
  display: grid; place-items: center;
}
.ai-hole {
  width: 26%; height: 52%;
  background: #150c04;
  clip-path: polygon(50% 0, 78% 16%, 78% 34%, 66% 44%, 76% 100%, 24% 100%, 34% 44%, 22% 34%, 22% 16%);
  box-shadow: 0 0 6px rgba(0,0,0,.8);
}
/* záblesk pri odomknutí */
.ai-lock::after {
  content: ''; position: absolute; inset: -55%;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,236,190,.95), transparent 62%);
  opacity: 0; transform: scale(.4);
}
.ac-intro.s-click .ai-lock::after { animation: aiFlash .55s ease-out; }
@keyframes aiFlash {
  0%   { opacity: 0; transform: scale(.35); }
  28%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.9); }
}
.ac-intro.s-click .ai-frame { animation: aiShake .3s ease-out; }
@keyframes aiShake {
  0%,100% { transform: translateX(0); }
  22% { transform: translateX(-2px); }
  58% { transform: translateX(2px); }
}

/* --- kľúč ---
   Kľúč je naozajstné 3D teleso z dvoch rovín: bočný pohľad (.ai-key-face,
   bradka a zuby) a hrana zhora (.ai-key-edge, hrúbka), ktorá stojí kolmo naň.
   Pri otočení sa kľúč valí okolo vlastnej osi drieku (rotateX) — ostane
   rovno v zámku, bočný pohľad sa zúži a vystúpi hrana.
   Na samotnom .ai-key preto nesmie byť filter ani opacity: obe by 3D
   sploštili a hrana by zmizla — tieň aj priehľadnosť nesú až deti. */
.ai-key {
  position: absolute; z-index: 8; top: 56%; left: 50%;
  width: calc(var(--dw) * .62); aspect-ratio: 132 / 44;
  /* kľúč stojí kúsok pred dverami (o polomer bradky), aby sa pri otočení
     spodná polovica bradky nezaborila do krídla */
  --kz: calc(var(--dw) * .62 * 24 / 132);
  transform-style: preserve-3d;
  transform-origin: 84.5% 45.5%;           /* os drieku, bod v kľúčovej dierke */
  /* východisko: mimo obrazu, nižšie a natočený — odvodené od šírky dverí,
     aby to sedelo na veľkej obrazovke aj na telefóne */
  transform: translate(calc(-84.5% + var(--dw) * 1.75), calc(-45.5% + var(--dw) * 1.1))
             translateZ(var(--kz)) rotate(38deg) rotateX(0deg) scale(1.25);
  transition: transform .95s cubic-bezier(.2,.7,.25,1);
}
.ai-key > svg {
  position: absolute; left: 0; width: 100%; display: block; overflow: visible;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.65));
  opacity: 0; transition: opacity .5s ease-out;
}
.ai-key-face { top: 0; height: 100%; }
/* hrana: 16/44 výšky kľúča, stred presne na osi drieku (45,5 %) */
.ai-key-edge {
  top: 27.27%; height: 36.36%;
  transform: rotateX(90deg);
}
.ac-intro.s-key .ai-key > svg { opacity: 1; }

/* Os otáčania (84,5 % šírky kľúča) musí sadnúť do kľúčovej dierky.
   Dierka je o ~5,6 % šírky kľúča vpravo od škáry — odtiaľ tie posuny. */
.ac-intro.s-key .ai-key {          /* priletí tesne pred zámok */
  transform: translate(calc(-84.5% + .5%), -45.5%) translateZ(var(--kz)) rotate(0deg) rotateX(0deg) scale(1);
}
.ac-intro.s-turn .ai-key {         /* zasunie sa rovno až po goliere */
  transform: translate(calc(-84.5% + 5.6%), -45.5%) translateZ(var(--kz)) rotate(0deg) rotateX(0deg) scale(1);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.ac-intro.s-roll .ai-key {         /* otočí sa vpravo okolo vlastnej osi o 90° */
  transform: translate(calc(-84.5% + 5.6%), -45.5%) translateZ(var(--kz)) rotate(0deg) rotateX(-90deg) scale(1);
  transition: transform .5s cubic-bezier(.45,-0.12,.3,1.18);
}
.ac-intro.s-out .ai-key {          /* rozplynie sa v zlatom záblesku, ostane otočený */
  transform: translate(calc(-84.5% + 4%), -45.5%) translateZ(var(--kz)) rotate(0deg) rotateX(-90deg) scale(1.04);
  transition: transform .42s ease-out;
}
.ac-intro.s-out .ai-key > svg { opacity: 0; transition: opacity .38s ease-in; }

/* --- popiska a preskočenie --- */
.ai-hint {
  position: absolute; left: 50%; bottom: clamp(46px, 11vh, 96px);
  transform: translateX(-50%); text-align: center;
  font-family: var(--f-d, 'Archivo', sans-serif);
  font-size: 10.5px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase;
  color: rgba(201,164,92,.85); white-space: nowrap;
  opacity: 0; transition: opacity .6s ease-out .35s;
}
.ac-intro.s-in .ai-hint { opacity: 1; }
.ac-intro.s-open .ai-hint { opacity: 0; transition: opacity .3s; }

.ai-skip {
  position: absolute; right: 22px; bottom: 22px; z-index: 9;
  border: 1px solid rgba(201,164,92,.4); background: rgba(13,38,39,.5);
  color: rgba(240,232,214,.8); border-radius: 999px;
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .06em;
  padding: 9px 18px; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: color .2s, border-color .2s, background .2s;
}
.ai-skip:hover { color: #fff; border-color: var(--gold, #c9a45c); background: rgba(13,38,39,.8); }

@media (max-width: 560px) {
  .ai-skip { right: 14px; bottom: 14px; padding: 8px 15px; font-size: 11.5px; }
  .ai-hint { font-size: 9.5px; letter-spacing: .26em; }
}

/* kto nechce pohyb, ten ho nedostane */
@media (prefers-reduced-motion: reduce) {
  .ai-room, .ai-leaf, .ai-key, .ai-glow, .ai-opening::after { transition-duration: .01ms !important; }
  .ac-intro { transition-duration: .2s !important; }
}