/* ---------- iPhone Duo, built from DOM ----------
   Matches Apple's iPhone Duo (Sept 2026): book-style fold, 1:√2 displays, one continuous inner
   panel with a soft crease, thin black bezels in a mirror-polished star white titanium frame,
   punch-hole camera in the outer display's top corner away from the spine, Touch ID side button and
   Camera Control on the right edge when closed.

   Model: two halves inside a hinge group. The LEFT half is the cover: its back carries the outer
   display and it rotates about the spine (its right edge). Closed, it lies over the right half with
   the outer display facing the viewer and the spine on the left, exactly like Apple's product shots. */
.duo {
  --fold: 180; --crease: 0; --sheen: 0; --wake: 1; --outer-light: 0; --cast: 0; --cast-op: 0;
  --half-h: calc(var(--half-w) * 1.414);
  --hinge-w: calc(var(--half-w) * -0.02); /* halves overlap slightly so perspective never opens a gap at the seam */
  --thick: calc(var(--half-w) * 0.05);
  --frame: calc(var(--half-w) * 0.012);
  --bezel: calc(var(--half-w) * 0.026);
  --r-out: calc(var(--half-w) * 0.085);
  --r-spine: calc(var(--half-w) * 0.022);
  /* star white: mirror-polished titanium frame, ceramic back */
  --ti-hi: #ffffff; --ti-mid: #d8d6d0; --ti-lo: #a3a19b; --ti-deep: #7d7b76;
  --back: #f1efea; --bezel-c: #07080a;
  position: relative;
  width: calc(var(--half-w) * 2 + var(--hinge-w));
  height: var(--half-h);
  perspective: calc(var(--half-w) * 7);
  perspective-origin: 50% 50%;
}
.duo__breathe { position: absolute; inset: 0; transform-style: preserve-3d; }
.duo__hinge {
  position: absolute; inset: 0; transform-style: preserve-3d;
  /* keep the visual centre fixed while the cover folds over the right half */
  transform: translateX(calc((var(--half-w) + var(--hinge-w)) * (1 - var(--fold) / 180) * -0.5));
}
.duo__half { position: absolute; top: 0; width: var(--half-w); height: 100%; transform-style: preserve-3d; }
.duo__half--right { left: calc(var(--half-w) + var(--hinge-w)); }
.duo__half--left {
  left: 0;
  transform-origin: calc(100% + var(--hinge-w) * 0.5) 50%;
  transform: translateZ(calc(var(--thick) * (1 - var(--fold) / 180) + 1px)) rotateY(calc((180 - var(--fold)) * 1deg));
}

/* ---------- Frame, bezel, screen ---------- */
.duo__face {
  position: absolute; inset: 0; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: linear-gradient(155deg, var(--ti-hi) 0%, var(--ti-mid) 16%, #f7f6f3 30%, var(--ti-lo) 50%, #edece8 66%, var(--ti-mid) 84%, var(--ti-hi) 100%);
}
.duo__half--left .duo__face { border-radius: var(--r-out) var(--r-spine) var(--r-spine) var(--r-out); }
.duo__half--right .duo__face { border-radius: var(--r-spine) var(--r-out) var(--r-out) var(--r-spine); }
/* faces mirrored to the back of a half */
.duo__half--left .duo__face--outer { border-radius: var(--r-spine) var(--r-out) var(--r-out) var(--r-spine); }
.duo__half--right .duo__face--back { border-radius: var(--r-out) var(--r-spine) var(--r-spine) var(--r-out); }
.duo__face--inner { transform: translateZ(calc(var(--thick) * 0.5)); }
.duo__face--back, .duo__face--outer { transform: rotateY(180deg) translateZ(calc(var(--thick) * 0.5)); }

.duo__bezel { position: absolute; inset: var(--frame); background: var(--bezel-c); overflow: hidden; }
/* no frame at the spine: the inner panel and its bezel run straight across the fold */
.duo__half--left .duo__face--inner .duo__bezel { right: 0; }
.duo__half--right .duo__face--inner .duo__bezel { left: 0; }
.duo__half--left .duo__face--inner .duo__bezel { border-radius: calc(var(--r-out) - var(--frame)) calc(var(--r-spine) - var(--frame)) calc(var(--r-spine) - var(--frame)) calc(var(--r-out) - var(--frame)); }
.duo__half--right .duo__face--inner .duo__bezel { border-radius: calc(var(--r-spine) - var(--frame)) calc(var(--r-out) - var(--frame)) calc(var(--r-out) - var(--frame)) calc(var(--r-spine) - var(--frame)); }
.duo__face--outer .duo__bezel { border-radius: calc(var(--r-spine) - var(--frame)) calc(var(--r-out) - var(--frame)) calc(var(--r-out) - var(--frame)) calc(var(--r-spine) - var(--frame)); }

.duo__screen { position: absolute; inset: var(--bezel); overflow: hidden; background: #000; }
/* inner panel is continuous: no bezel at the spine, tiny corner radius there */
.duo__half--left .duo__face--inner .duo__screen { right: 0; border-radius: calc(var(--r-out) * 0.62) 0 0 calc(var(--r-out) * 0.62); }
.duo__half--right .duo__face--inner .duo__screen { left: 0; border-radius: 0 calc(var(--r-out) * 0.62) calc(var(--r-out) * 0.62) 0; }
/* outer display: bezel on all four sides */
.duo__face--outer .duo__screen { border-radius: calc(var(--r-spine) * 0.5) calc(var(--r-out) * 0.62) calc(var(--r-out) * 0.62) calc(var(--r-spine) * 0.5); }

/* the soft crease where the panel folds; nano-texture keeps it faint when flat */
.duo__crease { position: absolute; top: 0; bottom: 0; width: 9%; z-index: 5; pointer-events: none; }
.duo__half--left .duo__crease { right: 0; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.07) 70%, rgba(0,0,0,.16)); }
.duo__half--right .duo__crease { left: 0; background: linear-gradient(270deg, rgba(0,0,0,0), rgba(0,0,0,.07) 70%, rgba(0,0,0,.16)); }
.duo__crease { opacity: calc(0.4 + var(--crease) * 0.6); }

/* punch-hole camera in the outer display, top corner away from the spine */
.duo__punch {
  position: absolute; top: 3.4%; right: 4.6%; width: 6.4%; aspect-ratio: 1; border-radius: 50%; z-index: 6;
  background: radial-gradient(circle at 42% 40%, #1c2230 0, #000 48%, #000 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), inset 0 0 2px rgba(120,140,180,.35);
}

/* slab thickness: the cover's outer edge, seen when it turns */
.duo__edge {
  position: absolute; top: calc(var(--r-out) * 0.55); bottom: calc(var(--r-out) * 0.55); left: 0; width: var(--thick);
  transform-origin: 0 50%;
  transform: rotateY(90deg) translateX(calc(var(--thick) * -0.5));
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ti-deep), #e6e4df 45%, var(--ti-lo) 60%, var(--ti-deep));
}
/* Touch ID side button and Camera Control on the cover's outer edge (right edge when closed) */
.duo__btn {
  position: absolute; left: calc(var(--frame) * -1.1); width: calc(var(--frame) * 1.4); border-radius: 1px;
  background: linear-gradient(90deg, var(--ti-lo), var(--ti-hi) 60%, var(--ti-mid));
  transform: translateZ(calc(var(--thick) * 0.1));
}
.duo__btn--side { top: 22%; height: 11%; }
.duo__btn--camera { top: 40%; height: 7%; }

/* back of the right half: ceramic shield, camera plateau (only ever seen from behind) */
.duo__face--back { background: radial-gradient(120% 100% at 30% 20%, #fbfaf7, var(--back) 55%, #dddbd5); }
.duo__plateau {
  position: absolute; top: 7%; right: 7%; width: 46%; height: 20%; border-radius: 999px;
  background: linear-gradient(160deg, #f6f5f2, #d7d5cf); box-shadow: 0 1px 2px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.6);
  display: flex; align-items: center; justify-content: space-evenly;
}
.duo__plateau i { width: 34%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a3d44, #0a0b0d 60%); box-shadow: 0 0 0 2px #c9c7c1, 0 0 0 3px #8f8d87; }

/* ---------- Lighting ---------- */
/* specular sweep across the turning cover; peaks when edge-on */
.duo__half--left .duo__face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 7; mix-blend-mode: screen;
  background: linear-gradient(100deg, rgba(255,255,255,0) 15%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 85%);
  opacity: calc(var(--sheen) * 0.7);
}
/* the cover's own inner page wakes as it lifts */
.duo__half--left .duo__face--inner::before {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: rgba(0, 0, 0, 0.6);
  opacity: calc(1 - var(--wake));
}
/* cast shadow on the right page beside the cover's projected edge */
.duo__half--right .duo__face--inner::before {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,.5) calc(var(--cast) * 100%), rgba(0,0,0,0) calc(var(--cast) * 100% + 14%)),
    linear-gradient(270deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35));
  opacity: var(--cast-op);
}
.duo__shadow {
  position: absolute; left: 6%; right: 6%; bottom: -9%; height: 16%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.42), rgba(0,0,0,0) 68%);
  filter: blur(8px);
  transform: scaleX(calc(0.5 + var(--fold) / 360));
}

/* ---------- Outer display: cover ----------
   A physical passport cover: pebbled navy leather lit from above, gold foil stamped into the grain.
   Original emblem (globe in a laurel wreath), PASSPORT, and the chip symbol at the foot.
   No frame, no issuer line, no coat of arms. */
.cover {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--cover-1) 88%, #fff 12%) 0%, var(--cover-1) 45%, var(--cover-2) 100%);
  box-shadow: inset 0 0 calc(var(--half-w) * 0.2) rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04);
  transition: background 0.5s var(--ease-page);
}
/* pebble grain: a lit bump map over the leather */
.cover::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='l' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.12' numOctaves='4' seed='7' stitchTiles='stitch' result='n'/%3E%3CfeDiffuseLighting in='n' lighting-color='%23ffffff' surfaceScale='2.4' diffuseConstant='1.05'%3E%3CfeDistantLight azimuth='235' elevation='55'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23l)'/%3E%3C/svg%3E");
  background-size: calc(var(--half-w) * 0.55) calc(var(--half-w) * 0.55);
}
/* fine grain on top */
.cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .3; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* foil: warm, matte, pressed INTO the leather (shadow above the stroke, faint light below) */
.cover__eu, .cover__country {
  position: absolute; left: 8%; right: 8%; text-align: center; margin: 0; z-index: 1;
  font-family: var(--font-serif); font-weight: 500; text-transform: uppercase;
  font-variation-settings: "opsz" 144, "SOFT" 10, "WONK" 0;
  background: linear-gradient(180deg, var(--foil-1) 0%, var(--foil-2) 55%, var(--foil-3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 -0.7px 0 rgba(0,0,0,.6)) drop-shadow(0 0.6px 0 rgba(255,236,190,.16));
  text-wrap: balance;
}
.cover__eu { top: 7%; font-size: calc(var(--half-w) * 0.032); letter-spacing: 0.3em; opacity: .85; }
.cover__country { top: 12%; font-size: calc(var(--half-w) * 0.042); letter-spacing: 0.2em; line-height: 1.35; }
.cover:not(.has-country) .cover__emblem { top: 20%; }
.cover.has-country .cover__emblem { top: 25%; height: 40%; }

.cover__word {
  position: absolute; left: 0; right: 0; top: 68.5%; text-align: center; margin: 0; z-index: 1;
  font-family: var(--font-serif); font-weight: 500; text-transform: uppercase;
  font-variation-settings: "opsz" 144, "SOFT" 10, "WONK" 0;
  font-size: calc(var(--half-w) * 0.082); letter-spacing: 0.26em;
  background: linear-gradient(180deg, var(--foil-1) 0%, var(--foil-2) 55%, var(--foil-3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 -0.7px 0 rgba(0,0,0,.6)) drop-shadow(0 0.6px 0 rgba(255,236,190,.16));
}
.cover__emblem {
  position: absolute; top: 20%; left: 50%; width: 52%; height: 44%; transform: translateX(-50%); z-index: 1;
  filter: drop-shadow(0 -0.7px 0 rgba(0,0,0,.6)) drop-shadow(0 0.6px 0 rgba(255,236,190,.16));
}
.cover__chip {
  position: absolute; bottom: 6.5%; left: 50%; width: 9%; height: 6.5%; transform: translateX(-50%); z-index: 1;
  filter: drop-shadow(0 -0.7px 0 rgba(0,0,0,.6));
}
.duo__face--outer .cover { filter: brightness(calc(0.6 + var(--outer-light) * 0.4)); }

/* Safety net: elements from any older cached HTML must never render on the cover */
.cover__mark, .cover__sub { display: none !important; }

/* Show mode slideshow on the outer screen */
.show { position: absolute; inset: 0; opacity: 0; background: #000; }

.duo.is-closed .duo__half--right { visibility: hidden; }

/* Idle breathing after the hero opens */
@keyframes breathe {
  0%, 100% { transform: rotateY(-1.4deg) rotateX(0.7deg); }
  50% { transform: rotateY(1.4deg) rotateX(-0.7deg); }
}
.duo.is-idle .duo__breathe { animation: breathe 7s ease-in-out infinite; }

@supports not (transform-style: preserve-3d) {
  .duo__half--left { transform: none; }
  .duo__face--outer, .duo__face--back, .duo__edge { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .duo.is-idle .duo__breathe { animation: none; }
}