/* ==========================================================================
   SKYRA — animations.css
   One orchestrated hero entrance, quiet section reveals, map + 3D motion.
   All motion is disabled under prefers-reduced-motion.
   ========================================================================== */

/* Theme transition: added briefly by theme.js so colours cross-fade */
.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
  transition: background-color .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease), fill .6s var(--ease), stroke .6s var(--ease) !important;
}

/* Hero load sequence */
.js [data-intro] { opacity: 0; transform: translateY(18px); }
.js.is-loaded [data-intro] {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease), transform 1.1s var(--ease);
}
.js.is-loaded [data-intro]:nth-child(1) { transition-delay: .05s; }
.js.is-loaded [data-intro]:nth-child(2) { transition-delay: .15s; }
.js.is-loaded [data-intro]:nth-child(3) { transition-delay: .3s; }
.js.is-loaded [data-intro]:nth-child(4) { transition-delay: .4s; }
.js.is-loaded [data-intro]:nth-child(5) { transition-delay: .5s; }
.js .hero__media img { clip-path: inset(0 0 0 100%); }
.js.is-loaded .hero__media img { clip-path: inset(0 0 0 0); transition: clip-path 1.4s var(--ease) .1s; }

/* Section heading reveal (headings only, not every card) */
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(24px); }
.reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform 1s var(--ease); }

@keyframes bump { 0%,100% { transform: scale(1); } 40% { transform: scale(1.12); } }
@keyframes pinPulse { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes pinDrop { from { opacity: 0; transform: translateY(-14px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes spin360 { to { transform: rotateY(360deg); } }
@keyframes modalIn { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: none; } }

.modal:not([hidden]) .modal__scrim, .drawer:not([hidden]) .drawer__scrim { animation: fadeIn .35s ease both; }
.modal:not([hidden]) .modal__panel { animation: modalIn .5s var(--ease) both; }
.drawer:not([hidden]) .drawer__panel { animation: drawerIn .5s var(--ease) both; }
.modal.is-closing, .drawer.is-closing { opacity: 0; transition: opacity .25s ease; }

/* ---------- Anamorphic corner screen (CSS version, pre-WebGL) ---------- */
.corner-screen {
  position: absolute;
  right: clamp(1rem, 22vw, 26rem); top: 46%;
  width: min(50vw, 720px); aspect-ratio: 1.45;
  transform-style: preserve-3d;
  transform: translateY(-50%) rotateX(calc(4deg + var(--tilt-x, 0deg))) rotateY(calc(-8deg + var(--tilt-y, 0deg)));
  transition: opacity 1s var(--ease);
}
.corner-screen__face {
  position: absolute; top: 0; height: 100%; width: 50%;
  overflow: hidden;
  border: 6px solid #0e1224;
  background: #07091a;
  box-shadow: 0 0 80px rgba(122, 92, 250, .35);
}
.corner-screen__face--left { left: 0; transform-origin: right center; transform: rotateY(-38deg); }
.corner-screen__face--right { right: 0; transform-origin: left center; transform: rotateY(38deg); }
.corner-screen__content {
  position: absolute; inset: -40%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 5px),
    radial-gradient(30% 35% at 35% 40%, rgba(200,161,90,.85), transparent 70%),
    radial-gradient(40% 45% at 65% 60%, rgba(122,92,250,.95), transparent 70%),
    radial-gradient(60% 60% at 50% 50%, #1b1147, #07091a);
  animation: ledDrift 12s ease-in-out infinite alternate;
}
.corner-screen__face--right .corner-screen__content { animation-direction: reverse; }
.corner-screen__breakout {
  position: absolute; left: 50%; bottom: 12%;
  display: flex; gap: 10px; align-items: end;
  transform-style: preserve-3d;
  transform: translateX(-50%) translateZ(120px);
}
.corner-screen__breakout i {
  display: block; width: clamp(14px, 2vw, 26px);
  height: calc(var(--h) * 1.9px);
  background: linear-gradient(180deg, #f3dca6, #c8a15a 45%, #7a5cfa);
  box-shadow: 0 0 30px rgba(200,161,90,.5);
  transform-origin: bottom;
  animation: rise 3.2s var(--ease) infinite alternate;
  animation-delay: calc(var(--d) * -0.45s);
}
@keyframes ledDrift { to { transform: translate(8%, -6%) rotate(12deg) scale(1.1); } }
@keyframes rise { from { transform: scaleY(.35) translateZ(0); } to { transform: scaleY(1) translateZ(60px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js [data-intro], .reveal-ready [data-reveal] { opacity: 1; transform: none; }
  .js .hero__media img { clip-path: none; }
}