/* =========================================================
   SKYMOTION — Site-wide enhancement layer (shared across all pages)
   Custom cursor · Lenis hooks · breathing hero · char stagger ·
   hover-video previews · stagger reveals · magnetic CTAs ·
   scroll progress · iris intro · image-reveal masks ·
   marquee · counters
   ========================================================= */

/* ===== Custom cursor (desktop only) ===== */
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
  html.has-cursor, html.has-cursor body { cursor: none; }
  html.has-cursor a,
  html.has-cursor button,
  html.has-cursor [role="button"],
  html.has-cursor [data-cursor="hover"] { cursor: none; }
}
.sm-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #fff;
  pointer-events: none;
  z-index: 99999;
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: width 320ms cubic-bezier(.2,.6,.2,1), height 320ms cubic-bezier(.2,.6,.2,1), background 220ms ease, border-color 220ms ease;
  will-change: transform, width, height;
}
.sm-cursor.is-hover {
  width: 60px; height: 60px;
  background: transparent;
  border-color: #fff;
}
@media (hover: none), (max-width: 768px) {
  .sm-cursor { display: none !important; }
}

/* ===== Hero breathing wrapper ===== */
@keyframes heroBreath {
  0%   { transform: translate(-50%, -50%) scale(1.0); }
  100% { transform: translate(-50%, -50%) scale(1.05); }
}
.hero-breath {
  animation: heroBreath 8s ease-in-out infinite alternate;
  will-change: transform;
}
@media (max-width: 768px) {
  .hero-breath { animation-duration: 14s; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-breath { animation: none; }
}

/* ===== Hero title char stagger ===== */
.hero-char {
  display: inline-block;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 900ms cubic-bezier(.2,.7,.2,1), opacity 900ms cubic-bezier(.2,.7,.2,1);
  will-change: transform, opacity;
}
.hero-char.in { transform: none; opacity: 1; }
.hero-char[data-space="1"] { width: 0.32em; }

/* ===== Hero sub fade ===== */
.hero-sub-fade {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 900ms cubic-bezier(.2,.6,.2,1) 800ms, transform 900ms cubic-bezier(.2,.6,.2,1) 800ms;
}
.hero-sub-fade.in { opacity: 1; transform: none; }

/* ===== Section reveal staggering ===== */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 900ms cubic-bezier(.2,.6,.2,1), transform 900ms cubic-bezier(.2,.6,.2,1);
  will-change: transform, opacity;
}
[data-stagger].is-in > * { opacity: 1; transform: none; }

/* ===== Featured-card hover preview iframe ===== */
.credit-card .card-preview {
  position: absolute; inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms cubic-bezier(.2,.6,.2,1);
}
.credit-card .card-preview.in { opacity: 1; }
.credit-card .card-preview iframe {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 177.78%;
  height: 100%;
  min-width: 100%;
  min-height: 56.25vw;
  border: 0;
  pointer-events: none;
}
@media (hover: none), (max-width: 900px) {
  .credit-card .card-preview { display: none !important; }
}

/* ===== Magnetic buttons ===== */
[data-magnetic] {
  transition: transform 350ms cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
@media (hover: none), (max-width: 768px) {
  [data-magnetic] { transform: none !important; }
}

/* ===== Scroll progress bar ===== */
.sm-progress {
  position: fixed;
  top: 0; left: 0;
  height: 1px;
  width: 0%;
  background: #fff;
  z-index: 99998;
  pointer-events: none;
  will-change: width;
}

/* ===== Iris intro — real 9-blade camera diaphragm =====
   Each blade rotates around its OWN offset pivot pin at radius R=125
   on the SVG, simulating real aperture mechanics (banana-curved
   blades on a Pitch Circle Diameter, NOT blades expanding from the
   center). 3D barrel + lens glass + rim are CSS layers behind/over
   the SVG. */
.iris-intro{position:fixed;inset:0;z-index:9999;background:transparent;backdrop-filter:none;display:flex;align-items:center;justify-content:center;perspective:1400px;pointer-events:none;contain:layout style paint}
.iris-stage{will-change:transform;transform-origin:center center;backface-visibility:hidden}
.iris-blade-rot{will-change:transform,opacity}
.iris-vignette{will-change:opacity}
.iris-barrel,.iris-barrel-inner,.iris-glass-bg,.iris-glass-front,.iris-rim{will-change:transform;transform:translateZ(0)}
.iris-intro.is-done{animation:iris-fade-out .9s ease both;pointer-events:none}
@keyframes iris-fade-out{to{opacity:0;visibility:hidden;transform:scale(1.4)}}
.iris-vignette{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 32%,#000 55%);pointer-events:none;transition:opacity .8s ease}
.iris-stage{position:relative;width:min(80vmin,720px);aspect-ratio:1;transform-style:preserve-3d;transform:rotateX(8deg) rotateY(-6deg) scale(var(--iris-scale,1));will-change:transform}
.iris-barrel{position:absolute;inset:-8%;border-radius:50%;background:radial-gradient(circle at center,transparent 64%,#2a2520 65%,#4a4035 70%,#2a2520 80%,#1a1612 90%,#2a2520 100%);box-shadow:inset 0 0 0 2px rgba(0,0,0,.6),inset 0 0 18px rgba(0,0,0,.9),0 30px 60px rgba(0,0,0,.6),0 0 80px rgba(201,169,97,.05);transform:translateZ(-30px)}
.iris-barrel-inner{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at center,transparent 78%,rgba(0,0,0,.55) 100%);box-shadow:inset 0 0 0 1px rgba(201,169,97,.15);transform:translateZ(-15px)}
.iris-glass-bg{position:absolute;inset:12%;border-radius:50%;background:transparent;box-shadow:inset 0 0 20px rgba(0,0,0,.18);transform:translateZ(-60px);animation:iris-breathe 8s ease-in-out infinite}
@keyframes iris-breathe{0%,100%{filter:brightness(1) hue-rotate(0deg)}50%{filter:brightness(1.15) hue-rotate(-8deg)}}
.iris-svg{position:absolute;inset:4%;width:92%;height:92%;overflow:visible}
.iris-glass-front{position:absolute;inset:8%;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse 40% 30% at 30% 22%,rgba(255,255,255,.18) 0%,rgba(255,255,255,.04) 35%,transparent 65%),radial-gradient(ellipse 22% 8% at 65% 80%,rgba(255,255,255,.08),transparent 65%);transform:translateZ(20px);mix-blend-mode:screen}
.iris-rim{position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(201,169,97,.7),inset 0 0 0 4px rgba(0,0,0,.4),inset 0 0 25px rgba(255,200,140,.15);transform:translateZ(10px)}
@media (hover: none), (max-width: 768px) { .iris-intro { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .iris-intro { display: none !important; } }

/* Wordmark fade-in (after iris) — also wraps a class on the wordmark image */
.sm-wordmark-fade {
  opacity: 0;
  transition: opacity 700ms cubic-bezier(.2,.6,.2,1);
}
.sm-wordmark-fade.in { opacity: 1; }

/* ===== Image-reveal masks ===== */
.sm-mask {
  -webkit-clip-path: inset(100% 0 0 0);
          clip-path: inset(100% 0 0 0);
  transition: -webkit-clip-path 900ms cubic-bezier(.22,.61,.36,1),
                      clip-path 900ms cubic-bezier(.22,.61,.36,1);
  will-change: clip-path;
}
.sm-mask.in {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}

/* ===== Marquee strip (homepage only, below hero) ===== */
.sm-marquee {
  overflow: hidden;
  height: 50px;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  background: #000;
  white-space: nowrap;
}
.sm-marquee-track {
  display: inline-flex;
  animation: smMarquee 60s linear infinite;
  height: 100%;
  align-items: center;
  will-change: transform;
}
.sm-marquee:hover .sm-marquee-track {
  animation-play-state: paused;
}
.sm-marquee-row {
  display: inline-flex;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  padding: 0 18px;
}
.sm-marquee-row > span { padding: 0 18px; }
.sm-marquee-row > span.dot { color: rgba(255,255,255,0.18); padding: 0; }
@keyframes smMarquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ===== Equipment hover-video preview ===== */
.sm-eq-tile { position: relative; }
.sm-eq-tile .sm-eq-preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background: #000;
  overflow: hidden;
  transition: opacity 500ms cubic-bezier(.2,.6,.2,1);
}
.sm-eq-tile .sm-eq-preview.in { opacity: 1; }
.sm-eq-tile .sm-eq-preview video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
@media (hover: none), (max-width: 768px) {
  .sm-eq-tile .sm-eq-preview { display: none !important; }
}