/* ------------------------------------------------------------------
   experience.css - motion + depth layer (pairs with experience.js).
   Monochrome-luxury: inherits the theme tokens, adds NO colors. Gated
   behind html.xj (JS on) and inert under prefers-reduced-motion.
   ------------------------------------------------------------------ */

/* film grain + soft vignette: the "shot on film" finish */
html.xj body::after {
  content: ""; position: fixed; inset: 0; z-index: 95; pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* interactive ink-dust background (canvas injected by experience.js) */
.xp-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* reading progress: hairline in the ink color */
.xp-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 90; pointer-events: none; }
.xp-progress i { display: block; height: 100%; background: var(--text);
  transform-origin: 0 0; transform: scaleX(0); opacity: .6; }

/* cinematic hero: lines rise out of masks on load */
html.xj .hero h1 .hl { display: block; overflow: hidden; }
html.xj .hero h1 .hl-in { display: block; transform: translateY(115%);
  transition: transform 1.1s cubic-bezier(.16,1,.3,1); }
html.xj.xload .hero h1 .hl-in { transform: none; }
html.xj.xload .hero h1 .hl:nth-child(2) .hl-in { transition-delay: .14s; }
html.xj .hero .hero-sub, html.xj .hero .cta-row {
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
html.xj.xload .hero .hero-sub { opacity: 1; transform: none; transition-delay: .4s; }
html.xj.xload .hero .cta-row { opacity: 1; transform: none; transition-delay: .58s; }

/* scrubbed reveals: driven per-frame by JS (opacity/blur/lift as a pure
   function of scroll position - reverses when you scroll back up) */
html.xj .xr { opacity: 0; transform: translateY(54px) scale(.985);
  filter: blur(10px); will-change: opacity, transform, filter; }

/* section hairlines draw themselves as the section arrives (JS sets --xw) */
html.xj main > section { position: relative; }
html.xj main > section::after {
  content: ""; position: absolute; top: 0; left: var(--pad-x, 0px); right: var(--pad-x, 0px);
  height: 1px; background: var(--border-strong); pointer-events: none;
  transform: scaleX(var(--xw, 0)); transform-origin: 0 50%;
}
html.xj main > section.hero::after { display: none; }

/* midnight-silver hardware: realistic titanium rail + deep bezel. Hardware
   color is theme-invariant (a real phone doesn't change with dark mode). */
.device {
  background:
    repeating-linear-gradient(0deg, rgba(198,208,240,.009) 0 1px, transparent 1px 6px),
    linear-gradient(145deg, #3b4155 0%, #262b3a 22%, #171a24 50%, #20242f 78%, #343b4e 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(186,197,255,.13),
    inset 0 0 0 2.5px rgba(0,0,0,.6),
    0 30px 70px -30px rgba(0,0,0,.7),
    0 2px 8px rgba(0,0,0,.4);
}
.device-bezel { background: #0a0a0c !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045); }
.dev-btn {
  width: 5px !important;
  border-radius: 2.5px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), transparent 30%, rgba(0,0,0,.25) 92%),
    linear-gradient(90deg, #2c3244, #3a4156, #232838) !important;
  box-shadow:
    inset 0 .5px 0 rgba(186,197,255,.28),
    inset 0 -.5px 0 rgba(0,0,0,.5),
    0 1px 2px rgba(0,0,0,.5) !important;
}
.dev-btn-action, .dev-btn-volup, .dev-btn-voldn { left: -3px !important; }
.dev-btn-power { right: -3px !important; }

/* spin faces: front children hide past 90deg; the injected back shows */
html.xj .device { transform-style: preserve-3d; }
html.xj .device > * { backface-visibility: hidden; }
html.xj .device-back {
  position: absolute; inset: 0; border-radius: inherit;
  transform: rotateY(180deg) translateZ(20px); backface-visibility: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(198,208,240,.010) 0 1px, transparent 1px 6px),
    linear-gradient(115deg, transparent 30%, rgba(186,197,255,.05) 46%, rgba(186,197,255,.08) 50%, rgba(186,197,255,.05) 54%, transparent 70%),
    linear-gradient(155deg, #2c3244 0%, #1f2331 38%, #161923 70%, #252b3b 100%);
  box-shadow: inset 0 0 0 1px rgba(186,197,255,.09), inset 0 0 0 3px rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
}
/* inset glass back panel, like the Pro unibody */
html.xj .device-back::before {
  content: ""; position: absolute; inset: 2.8%; border-radius: 46px;
  background:
    repeating-linear-gradient(90deg, rgba(198,208,240,.010) 0 1px, transparent 1px 6px),
    linear-gradient(160deg, rgba(120,132,170,.10), rgba(20,23,32,.0) 45%, rgba(0,0,0,.22)),
    linear-gradient(155deg, #272c3c, #1a1e2b 60%, #191c28);
  box-shadow: inset 0 0 0 1px rgba(186,197,255,.035), inset 0 1px 2px rgba(0,0,0,.25);
}

html.xj .device-back .bmark {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(18px, 5vw, 25px); color: #3e4658; position: relative; opacity: .85; letter-spacing: .02em;
  transform: translateY(8%);
}
.device--mini .device-back { display: none; }

/* solid body: the frame is extruded from stacked solid plates, 1.35px apart
   in z. From any angle the edge reads as machined metal - the body can never
   look hollow because it IS solid geometry. */
html.xj .device-ply {
  position: absolute; inset: 0; border-radius: inherit;
  transform: translateZ(calc(var(--i) * -1.35px));
  background:
    repeating-linear-gradient(0deg, rgba(198,208,240,.009) 0 1px, transparent 1px 6px),
    linear-gradient(145deg, #3a4054 0%, #252a39 25%, #161923 55%, #2d3343 100%);
  box-shadow: inset 0 0 0 1px rgba(186,197,255,.05);
  backface-visibility: visible; pointer-events: none;
}

/* dimensional camera: raised plateau + ringed glass lenses with specular hits */
html.xj .device-back .cam {
  position: absolute; top: 2.4%; left: 4.5%; right: 4.5%; width: auto; height: 24%;
  border-radius: 26px;
  background: linear-gradient(160deg, #333a4c 0%, #262c3c 45%, #1c212e 100%);
  box-shadow:
    inset 0 1px 0 rgba(186,197,255,.14),
    inset 0 -3px 8px rgba(0,0,0,.45),
    0 12px 26px rgba(0,0,0,.5),
    0 2px 6px rgba(0,0,0,.35);
}
/* real lens elements - pinned positions, Apple triangle: 2 stacked left, 1 top right */
html.xj .cam i { position: absolute; display: block; border-radius: 50%; }
html.xj .cam .l {
  width: 23%; aspect-ratio: 1;
  background:
    radial-gradient(circle at 36% 30%, rgba(215,225,255,.5) 0 5%, transparent 11%),
    radial-gradient(circle at 62% 68%, rgba(120,140,200,.18) 0 8%, transparent 16%),
    radial-gradient(circle, #04060c 0 30%, #0f141f 38%, #1a2130 45%, #070a10 52%, #3c455f 58%, #505a7c 63%, #232838 72%, #191d29 80%, #212734 100%);
  box-shadow: 0 3px 8px rgba(0,0,0,.55), inset 0 1px 1px rgba(200,212,255,.14), inset 0 -2px 4px rgba(0,0,0,.5);
}
html.xj .cam .l1 { left: 8%; top: 6%; }
html.xj .cam .l2 { left: 8%; bottom: 6%; }
html.xj .cam .l3 { right: 8%; top: 6%; }
html.xj .cam .fl { width: 7%; aspect-ratio: 1; right: 24%; top: 58%;
  background: radial-gradient(circle at 40% 35%, #fff8e6 0 30%, #e8dcb8 55%, #8f886f 80%, #3a3f4e 100%);
  box-shadow: 0 0 6px rgba(255,244,214,.25), inset 0 0 2px rgba(0,0,0,.35); }
html.xj .cam .ld { width: 5.5%; aspect-ratio: 1; right: 12%; top: 60%;
  background: radial-gradient(circle at 40% 35%, #1a1f2c 0 40%, #0a0d15 70%, #232936 100%);
  box-shadow: inset 0 1px 1px rgba(200,212,255,.1); }

/* device mockups: 3D lean (JS: --xrx/--xry) + a slow luxury float */
html.xj .device {
  transform: perspective(1100px) translateY(var(--xty, 0px)) rotateX(var(--xrx, 0deg)) rotateY(var(--xry, 0deg));
  will-change: transform;
}

/* primary CTA: periodic shine sweep + magnetic (JS-lerped) */
html.xj .btn-primary { position: relative; overflow: hidden; will-change: transform; }
html.xj .btn-primary::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -45%; width: 38%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-18deg) translateX(0); animation: xshine 5.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes xshine { 0%, 72% { transform: skewX(-18deg) translateX(0); }
  88%, 100% { transform: skewX(-18deg) translateX(560%); } }


/* real 3D hero phone (phone3d.js). The slot keeps the CSS phone's layout
   footprint; the canvas overflows it so the scroll-spin never clips. */
.phone3d-slot { position: relative; width: clamp(252px, 64vw, 320px); aspect-ratio: 1320 / 2868; }
.phone3d-canvas { position: absolute; left: -40%; top: -15%; width: 180%; height: 130%; pointer-events: none; }
html.x3d .device.phone3d-replaced { display: none; }

/* while the 3D model loads, keep the CSS mockup out of sight (layout kept) */
html.x3d-wait .hero-mockup .device { visibility: hidden; }