/* ═══════════════════════════════════════════════════════════════════════
   CINEMATIC INTRO v4 — Photography Portfolio (~9s, no idle hold)
   Scene 1  [ 0.0 – 1.6s ]  Atmosphere
   Scene 2  [ 1.4 – 3.0s ]  Viewfinder draws
   Scene 3  [ 3.0 – 5.0s ]  Camera shutter — three captures
   Scene 5  [ 5.0 – 6.5s ]  Typography
   Scene 6  [ 6.5 – 7.5s ]  Logo materialises
   Exit     [ 7.5 – 9.0s ]  AS splits + zooms outward into home page
   ═══════════════════════════════════════════════════════════════════════ */

html.intro-seen #intro { display: none !important; }

/* ─── Base ──────────────────────────────────────────────────────────── */
.intro {
  position: fixed; inset: 0;
  z-index: 10000;
  background: #050503;
  overflow: hidden;
  opacity: 0;
  animation: i-in 0.3s ease-out forwards;
}
.intro.gone {
  animation: i-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}
@keyframes i-in  { to { opacity: 1; } }
@keyframes i-out {
  0%   { opacity: 1; transform: scale(1);    filter: blur(0); }
  100% { opacity: 0; transform: scale(1.08); filter: blur(2px); visibility: hidden; }
}

/* ─── Scene 1 : Film grain ──────────────────────────────────────────── */
.i-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='3'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.75 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0;
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: i-grain-in 1.0s ease-out 0.1s both;
}
@keyframes i-grain-in { to { opacity: 0.32; } }

/* ─── Scene 1 : Vignette ────────────────────────────────────────────── */
.i-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(5,5,3,0.72) 100%);
  opacity: 0; pointer-events: none;
  animation: i-vig 1.1s ease-out 0.2s both;
}
@keyframes i-vig { to { opacity: 1; } }

/* ─── Scene 1 : Diagonal light leak ────────────────────────────────── */
.i-diag-leak {
  position: absolute;
  width: 200%; height: 90%;
  top: -25%; left: -90%;
  background: linear-gradient(118deg,
    rgba(200,162,101,0) 0%,
    rgba(200,162,101,0.28) 30%,
    rgba(230,190,130,0.55) 50%,
    rgba(200,162,101,0.22) 68%,
    rgba(200,162,101,0) 100%);
  filter: blur(35px);
  opacity: 0; pointer-events: none;
  animation: i-diag 1.7s ease-in-out 0.4s both;
}
@keyframes i-diag {
  0%   { opacity: 0; transform: translateX(0) rotate(0deg); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(65%) rotate(4deg); }
}

/* ─── Scene 1 : Focus-square flicker ───────────────────────────────── */
.i-focus-sq {
  position: absolute;
  top: 50%; left: 50%;
  width: min(300px, 44vw); height: min(300px, 44vw);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(200,162,101,0.6);
  opacity: 0; pointer-events: none;
  animation: i-flicker 1.2s steps(1) 0.6s both;
}
@keyframes i-flicker {
  0%  { opacity: 0; }
  10% { opacity: 0.9; }
  22% { opacity: 0; }
  35% { opacity: 0.65; }
  50% { opacity: 0; }
  65% { opacity: 0.5; }
  80% { opacity: 0; }
  100%{ opacity: 0; }
}

/* ─── Scene 2 : Viewfinder container ───────────────────────────────── */
.i-vf {
  position: absolute; inset: 0;
  pointer-events: none;
  animation: i-vf-dim 0.8s ease-in 3.0s both;
}
@keyframes i-vf-dim { to { opacity: 0.28; } }

/* Main lines — draw via scaleX(0→1) / scaleY(0→1) */
.i-vfl { position: absolute; }
.i-vfl-h {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(200,162,101,0.65) 20%, rgba(200,162,101,0.65) 80%, transparent 100%);
  transform: scaleX(0);
  transform-origin: left center;
  animation: i-draw-h 0.85s cubic-bezier(0.22,1,0.36,1) both;
}
.i-vfl-v {
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(200,162,101,0.65) 20%, rgba(200,162,101,0.65) 80%, transparent 100%);
  transform: scaleY(0);
  transform-origin: top center;
  animation: i-draw-v 0.85s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes i-draw-h { to { transform: scaleX(1); } }
@keyframes i-draw-v { to { transform: scaleY(1); } }

/* Outer horizontal lines */
.i-vfl-h.h1 { top: 22%; left: 8%; width: 84%; animation-delay: 1.4s; }
.i-vfl-h.h2 { top: 78%; left: 8%; width: 84%; animation-delay: 1.55s; }
/* Outer vertical lines */
.i-vfl-v.v1 { left: 22%; top: 8%; height: 84%; animation-delay: 1.7s; }
.i-vfl-v.v2 { left: 72%; top: 8%; height: 84%; animation-delay: 1.85s; }
/* Asymmetric inner detail lines */
.i-vfl-h.h3 {
  top: 50%; left: 8%; width: 14%;
  opacity: 0;
  animation: i-dim-line 0.5s ease-out 2.2s both;
}
.i-vfl-v.v3 {
  left: 40%; top: 8%; height: 14%;
  opacity: 0;
  animation: i-dim-line 0.5s ease-out 2.35s both;
}
@keyframes i-dim-line {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 0.3; }
}

/* Corner brackets */
.i-vfc { position: absolute; width: 22px; height: 22px; }
.i-vfc span { position: absolute; background: rgba(200,162,101,0.9); }
.i-vfc .h { height: 1px; width: 0; }
.i-vfc .v { width: 1px; height: 0; }

.i-vfc.tl { top: 22%; left: 8%; }
.i-vfc.tl .h { top:0; left:0; animation: grow-r 0.4s ease-out 1.9s both; }
.i-vfc.tl .v { top:0; left:0; animation: grow-d 0.4s ease-out 1.9s both; }

.i-vfc.tr { top: 22%; right: 8%; }
.i-vfc.tr .h { top:0; right:0; animation: grow-l 0.4s ease-out 1.95s both; }
.i-vfc.tr .v { top:0; right:0; animation: grow-d 0.4s ease-out 1.95s both; }

.i-vfc.bl { bottom: 22%; left: 8%; }
.i-vfc.bl .h { bottom:0; left:0; animation: grow-r 0.4s ease-out 2.0s both; }
.i-vfc.bl .v { bottom:0; left:0; animation: grow-u 0.4s ease-out 2.0s both; }

.i-vfc.br { bottom: 22%; right: 8%; }
.i-vfc.br .h { bottom:0; right:0; animation: grow-l 0.4s ease-out 2.05s both; }
.i-vfc.br .v { bottom:0; right:0; animation: grow-u 0.4s ease-out 2.05s both; }

@keyframes grow-r { to { width: 22px; } }
@keyframes grow-l { from { width: 0; right: 0; } to { width: 22px; } }
@keyframes grow-d { to { height: 22px; } }
@keyframes grow-u { from { height: 0; bottom: 0; } to { height: 22px; } }

/* Focus crosshairs */
.i-vf-fp {
  position: absolute;
  width: 10px; height: 10px;
  opacity: 0;
  animation: i-fp-pulse 1.5s ease-in-out 2.2s both;
}
.i-vf-fp::before, .i-vf-fp::after {
  content: ''; position: absolute;
  background: rgba(200,162,101,0.75);
}
.i-vf-fp::before { width: 100%; height: 1px; top: 50%; left: 0; transform: translateY(-50%); }
.i-vf-fp::after  { width: 1px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); }
.i-vf-fp.fp1 { top: 48%; left: 48%; }
.i-vf-fp.fp2 { top: 32%; left: 64%; }
@keyframes i-fp-pulse {
  0%   { opacity: 0; }
  25%  { opacity: 0.9; }
  55%  { opacity: 0.4; }
  80%  { opacity: 0.8; }
  100% { opacity: 0.5; }
}

/* Micro UI indicators */
.i-ui { position: absolute; inset: 0; pointer-events: none; }
.i-ui-item {
  position: absolute;
  font-family: monospace;
  font-size: clamp(8px, 1vw, 11px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(200,162,101,0.8);
  opacity: 0;
  animation: i-ui-in 0.4s ease-out var(--d, 2.2s) both,
             i-ui-out 0.4s ease-in calc(var(--d, 2.2s) + 1.0s) both;
}
@keyframes i-ui-in  { to { opacity: 1; } }
@keyframes i-ui-out { to { opacity: 0; } }

.i-ui-item.iso  { bottom: 21%; left: 8.5%;   --d: 2.2s; }
.i-ui-item.fstop{ bottom: 21%; left: 22.5%;  --d: 2.35s; }
.i-ui-item.ss   { top: 21%;    left: 8.5%;   --d: 2.5s; }
.i-ui-item.exp  { top: 21%;    right: 27.5%; --d: 2.65s; }

/* ═══════════════════════════════════════════════════════════════
   Scene 3 : Camera-shutter captures — three rapid snaps
   Each photo appears with a quick fade-in + slight scale-down,
   then immediately sharpens from blur (autofocus settling).
   ═══════════════════════════════════════════════════════════ */
.i-imgs {
  position: absolute; inset: 0;
  pointer-events: none;
}

/* Atmospheric background haze */
.i-img-bg {
  position: absolute; inset: 0;
  background: url('images/Japan/IMG_0393.JPG') center/cover no-repeat;
  filter: blur(36px) saturate(0.5);
  transform: scale(1.1);
  opacity: 0;
  animation: i-bg-in 1.4s ease-out 3.0s both;
}
@keyframes i-bg-in { to { opacity: 0.15; } }

/* Camera-shutter capture: pop in, then focus pulls from blur to clear */
@keyframes i-cam-shot {
  0%   { opacity: 0; transform: scale(1.06); filter: blur(14px) saturate(0.55); }
  18%  { opacity: 1;                          filter: blur(12px) saturate(0.6);  }
  100% { opacity: 1; transform: scale(1.0);  filter: blur(0)    saturate(1.0);  }
}
@keyframes i-cam-shot-r {
  0%   { opacity: 0; transform: scale(1.06); filter: blur(14px) saturate(0.55); }
  18%  { opacity: 0.9;                       filter: blur(12px) saturate(0.6);  }
  100% { opacity: 0.9; transform: scale(1.0); filter: blur(0)    saturate(1.0); }
}

/* Optional brief flash overlay accompanying each shot */
@keyframes i-flash {
  0%   { opacity: 0; }
  35%  { opacity: 0.55; }
  100% { opacity: 0; }
}

/* Main — landscape frame, shifted lower */
.i-img-main {
  position: absolute;
  left: 22%; top: 28%;
  width: min(54vw, 640px);
  height: 46%;
  background: url('images/Japan/IMG_0393.JPG') center/cover no-repeat;
  opacity: 0;
  z-index: 2;
  animation: i-cam-shot 1.2s cubic-bezier(0.22,1,0.36,1) 3.0s both;
}

/* Left — portrait, snaps in just after main */
.i-img-l {
  position: absolute;
  left: 4%; top: 18%;
  width: min(22vw, 240px);
  height: 42%;
  background: url('images/Japan/IMG_1282.JPG') center top/cover no-repeat;
  opacity: 0;
  z-index: 1;
  animation: i-cam-shot-r 1.2s cubic-bezier(0.22,1,0.36,1) 3.45s both;
}

/* Right — portrait, snaps in last */
.i-img-r {
  position: absolute;
  right: 3%; top: 22%;
  width: min(26vw, 300px);
  height: 56%;
  background: url('images/Singapore/IMG_6462.JPG') center top/cover no-repeat;
  opacity: 0;
  z-index: 3;
  animation: i-cam-shot-r 1.2s cubic-bezier(0.22,1,0.36,1) 3.9s both;
}

/* ─── Scene 5 : Typography ──────────────────────────────────────────── */
.i-tag {
  position: absolute;
  left: 8%;
  bottom: 10%;
  z-index: 5;
  pointer-events: none;
}
.i-name {
  font-family: var(--sans, 'Inter', sans-serif);
  font-weight: 300;
  font-size: clamp(26px, 3.5vw, 46px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #F3ECDE;
  opacity: 0;
  transform: translateY(12px);
  animation: i-text-in 1.2s cubic-bezier(0.22,1,0.36,1) 5.0s both;
}
.i-name em { font-style: italic; color: rgba(200,162,101,0.9); }
.i-sub {
  margin-top: 10px;
  font-family: monospace;
  font-size: clamp(9px, 1.1vw, 12px);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(243,236,222,0.45);
  opacity: 0;
  transform: translateY(10px);
  animation: i-text-in 1.0s cubic-bezier(0.22,1,0.36,1) 5.5s both;
}
@keyframes i-text-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Scene 6 : Logo finale ─────────────────────────────────────────── */

/* Images dim, tag dims */
.i-imgs {
  animation: i-imgs-dim 1.0s ease-in 6.2s both;
}
@keyframes i-imgs-dim {
  to { opacity: 0.18; filter: saturate(0.4); }
}
.i-tag {
  animation: i-tag-out 0.7s ease-in 6.2s both;
}
@keyframes i-tag-out { to { opacity: 0; transform: translateY(-8px); } }

.i-logo-bg-leak {
  position: absolute;
  top: 50%; left: 50%;
  width: 60vw; height: 60vw;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(200,162,101,0.25) 0%,
    rgba(200,162,101,0.08) 40%,
    rgba(200,162,101,0) 70%);
  filter: blur(50px);
  opacity: 0; pointer-events: none;
  z-index: 6;
  animation: i-logo-leak 1.6s ease-out 6.4s both;
}
@keyframes i-logo-leak {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.7); }
  60%  { opacity: 1; }
  100% { opacity: 0.7; transform: translate(-50%,-50%) scale(1.0); }
}

.i-logo {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.88);
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-weight: 300;
  font-size: clamp(80px, 12vw, 130px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: #F3ECDE;
  text-shadow: 0 0 0 rgba(200,162,101,0);
  opacity: 0;
  z-index: 7;
  pointer-events: none;
  animation: i-logo-in 1.0s cubic-bezier(0.22,1,0.36,1) 6.5s both;
}
.i-logo em { font-style: italic; color: rgba(200,162,101,0.95); }
@keyframes i-logo-in {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.88); text-shadow: 0 0 0 rgba(200,162,101,0); }
  55%  { opacity: 1; transform: translate(-50%,-50%) scale(1.02); text-shadow: 0 0 80px rgba(200,162,101,0.6); }
  100% { opacity: 1; transform: translate(-50%,-50%) scale(1.00); text-shadow: 0 0 28px rgba(200,162,101,0.22); }
}

/* Split open into the home page — A drifts left, S drifts right.
   They also scale up subtly so it feels like we're being pushed forward
   through the logo into the world beyond. */
.i-logo .al-a, .i-logo .al-s {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.i-logo .al-a {
  animation: i-split-a 1.5s cubic-bezier(0.55, 0, 0.2, 1) 7.5s both;
}
.i-logo .al-s {
  animation: i-split-s 1.5s cubic-bezier(0.55, 0, 0.2, 1) 7.5s both;
  font-style: italic;
  color: rgba(200,162,101,0.95);
}
@keyframes i-split-a {
  0%   { transform: translateX(0)     scale(1);    filter: blur(0); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translateX(-78vw) scale(1.35); filter: blur(2px); opacity: 0; }
}
@keyframes i-split-s {
  0%   { transform: translateX(0)    scale(1);    filter: blur(0); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translateX(78vw) scale(1.35); filter: blur(2px); opacity: 0; }
}
/* The orange glow softens out alongside the split */
.i-logo-bg-leak {
  animation:
    i-logo-leak     1.6s ease-out 6.4s both,
    i-logo-leak-out 1.4s ease-out 7.5s both;
}
@keyframes i-logo-leak-out {
  to { opacity: 0; transform: translate(-50%,-50%) scale(1.4); }
}

/* Snap overlay no longer needed — split provides the exit */
.i-snap { display: none; }

/* Hide the unused legacy elements that were tied to removed clip-path wipes */
.i-rack-focus, .i-edge-t, .i-edge-b, .i-flare { display: none; }

/* ─── Loading bar ───────────────────────────────────────────────────── */
.i-loadbar-track {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(243, 236, 222, 0.06);
  overflow: hidden;
  z-index: 25;
  pointer-events: none;
}
.i-loadbar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg,
    rgba(200, 162, 101, 0.35) 0%,
    rgba(200, 162, 101, 0.95) 55%,
    rgba(243, 236, 222, 1) 100%);
  box-shadow:
    0 0 8px rgba(200, 162, 101, 0.55),
    0 0 18px rgba(200, 162, 101, 0.3);
  animation: i-loadbar-fill 7.5s cubic-bezier(0.42, 0, 0.6, 1) 0s forwards;
}
@keyframes i-loadbar-fill {
  0%   { width: 0; }
  100% { width: 100%; }
}

/* ─── Skip button ───────────────────────────────────────────────────── */
.i-skip {
  position: absolute;
  bottom: 24px; right: 24px;
  background: transparent;
  border: 1px solid rgba(243,236,222,0.2);
  color: rgba(243,236,222,0.45);
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  z-index: 30;
  opacity: 0;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
  animation: i-skip-in 0.5s ease-out 1.0s both;
}
.i-skip:hover {
  color: #F3ECDE;
  border-color: rgba(243,236,222,0.45);
  background: rgba(243,236,222,0.05);
}
@keyframes i-skip-in { to { opacity: 1; } }

/* ─── Mobile ────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  /* Symmetric three-photo layout on mobile */
  .i-img-l    { display: block; left: 3%;  width: 22vw; top: 26%; height: 38%; }
  .i-img-main { left: 27%;  width: 46vw; top: 30%; height: 30%; }
  .i-img-r    { right: 3%;  width: 22vw; top: 26%; height: 38%; }
  .i-tag      { left: 5%;   bottom: 10%; }
  .i-name     { font-size: 22px; letter-spacing: 0.14em; }
  .i-skip     { bottom: 16px; right: 16px; padding: 8px 14px; }
  /* Tighten viewfinder corners on small screens so they don't crowd the photos */
  .i-vfc.tl, .i-vfc.tr { top: 20%; }
  .i-vfc.bl, .i-vfc.br { bottom: 20%; }
}