/* Zoro & Nelli — AnyInvites envelope opening (Verona envelope floral3, gold wax) followed
   by the Alhambra ("islamic") hero. Ported to plain CSS from AnyInvites: the Islamic
   tokens and hero composition (Hero.tsx), its film layers (HeroGustVideo.tsx) and the
   envelope opening (EnvelopeReveal.tsx). */

/* ---------- Fonts (self-hosted, SIL OFL 1.1 — see assets/fonts) ---------- */

@font-face {
  font-family: 'Luxurious Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/luxurious-script-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Luxurious Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/luxurious-script-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/libre-baskerville-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/libre-baskerville-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/libre-baskerville-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/libre-baskerville-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/libre-baskerville-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/libre-baskerville-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Alhambra tokens (templateTokens.ts "islamic" → tokensToCssVars) ---------- */

:root {
  --ev-bg: #faf2e8;
  --ev-text: #3d1a1c;
  --ev-primary: #b07f51;
  --ev-ink-carved: #350b0c;
  --ev-font-display: 'Luxurious Script', 'Libre Baskerville', Georgia, cursive;
  --ev-font-body: 'Libre Baskerville', Georgia, serif;
  --ev-body-tracking: -0.3px;
  /* Name sizing measured for Luxurious Script (nameVars: advance 0.315 × 1.04) */
  --ev-name-scale: 1;
  --ev-name-advance: 0.328;

  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0.18px;
  color-scheme: light;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  overflow-x: clip;
}

html {
  background-color: var(--ev-bg);
}

body {
  margin: 0;
  color: var(--ev-text);
  font-family: var(--ev-font-body);
}

h1,
p {
  margin: 0;
}

img,
video {
  display: block;
}

[hidden] {
  display: none !important;
}

/* While the envelope is up nothing behind it may scroll */
.ev-open,
.ev-open body {
  overflow: hidden;
}

/* ---------- Page ---------- */

.invitation {
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow-x: clip;
  background-color: var(--ev-bg);
  color: var(--ev-text);
  font-family: var(--ev-font-body);
}

/* One fixed sheet of pressed paper behind the page */
.paper {
  position: fixed;
  inset: 0;
  z-index: -10;
  background: url('assets/hero/fig-isl-paper.jpg') center / cover no-repeat;
  pointer-events: none;
}

/* ---------- Hero (Alhambra composition) ---------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  text-align: center;
  color: var(--ev-text);
}

.hero:focus {
  outline: none;
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Every layer of the backdrop shares one box, fit and anchor, so none can jump */
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  pointer-events: none;
}

.hero-clip {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-clip.is-shown {
  opacity: 1;
}

.hero-clip.is-cut {
  transition: none;
}

/* The names sit in the cartouche's lit centre */
.hero-text {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 344px;
  margin-top: 24vh;
  margin-top: 24svh;
  padding: 0 16px 24px;
}

/* The soft pool of light that lifts the oxblood type off the plaster */
.hero-lift {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 300px;
  height: 420px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.28) 45%, transparent 72%);
  pointer-events: none;
}

.hero-eyebrow {
  max-width: 200px;
  color: var(--ev-primary);
  font-family: var(--ev-font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.hero-names {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  color: var(--ev-ink-carved);
  font-family: var(--ev-font-display);
  font-size: clamp(4rem, 21vw, 6.2rem);
  font-weight: 600;
  line-height: 0.88;
  overflow-wrap: anywhere;
  container-type: inline-size;
}

/* A short name keeps the design size; a long one shrinks to fit its line */
.hero-name {
  display: block;
  width: 100%;
  text-align: center;
  line-height: var(--ev-name-lh, 0.88);
  font-size: calc(1em * var(--ev-name-scale, 1));
  font-size: min(calc(1em * var(--ev-name-scale, 1)), calc(100cqi / (var(--name-longest, 5) * var(--ev-name-advance, 0.6))));
}

.hero-amp {
  width: auto;
  height: 0.42em;
}

.hero-info,
.hero-message {
  color: var(--ev-ink-carved);
  font-family: var(--ev-font-body);
  font-size: 17px;
  line-height: 26px;
  letter-spacing: var(--ev-body-tracking);
}

.hero-address {
  white-space: pre-line;
}

.hero-message {
  max-width: 320px;
  font-style: italic;
}

@media (min-width: 768px) {
  .hero-text { max-width: 420px; }
  .hero-lift { width: 340px; height: 480px; }
}

@media (min-width: 1024px) {
  .hero-text { max-width: 480px; }
}

/* ---------- Hero motion (Hero.tsx shared styles) ---------- */

@keyframes rwHeroTextIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes rwHeroSettle {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}

.rw-hero-bleed {
  animation: rwHeroSettle 2.3s cubic-bezier(0.33, 0, 0.2, 1) 0.15s both;
}

.rw-hero-text {
  animation: rwHeroTextIn 1.1s ease-out 0.5s both;
}

@media (prefers-reduced-motion: reduce) {
  .rw-hero-bleed,
  .rw-hero-text { animation: none; }
}

/* Behind the envelope the entrance waits on its first frame … */
.rw-hero-hold .rw-hero-bleed,
.rw-hero-hold .rw-hero-text {
  animation-play-state: paused;
}

/* … the panel is simply there when the envelope crossfades away … */
.rw-hero-after-envelope .rw-hero-bleed {
  animation: none;
}

/* … and a guest who opened the envelope by hand gets the lettering arriving too */
.rw-hero-motion .rw-hero-text {
  animation: rwHeroTextIn 1.1s ease-out 0.5s both;
}

/* ---------- Envelope opening (EnvelopeReveal.tsx) ---------- */

.ev-reveal {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow: hidden;
  background-color: var(--ev-bg, #14100f);
  color: var(--ev-text);
  font-family: var(--ev-font-body);
  touch-action: none;
  /* The film ends on a floral frame; this crossfade carries it into the hero */
  transition: opacity 300ms ease;
  --stage-w: max(100vw, 100vh * 9 / 16);
}

.ev-reveal.is-fading {
  opacity: 0;
  pointer-events: none;
}

.no-js .ev-reveal {
  display: none;
}

/* PORTRAIT — the 9:16 film covers the screen, anchored at the top. */
@supports (height: 100svh) {
  .ev-reveal { --stage-w: max(100vw, 100svh * 9 / 16); }
}

.ev-stage {
  position: absolute;
  top: 0;
  left: calc((100vw - var(--stage-w)) / 2);
  width: var(--stage-w);
  height: calc(var(--stage-w) * 16 / 9);
  isolation: isolate;
}

.ev-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ev-ambient {
  display: none;
}

/* LANDSCAPE — the envelope is shown whole, lying in a softly lit room made of its
   own colours. Capped at the film's own height so it is never upscaled. */
@media (min-aspect-ratio: 1/1) {
  .ev-reveal {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ev-reveal {
    --stage-w: calc(min(96vh, 1920px) * 9 / 16);
  }

  .ev-stage {
    position: relative;
    top: auto;
    left: auto;
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.55),
      0 34px 64px -14px rgba(0, 0, 0, 0.72),
      0 90px 150px -50px rgba(0, 0, 0, 0.9);
  }

  .ev-ambient {
    display: block;
    position: absolute;
    inset: 0;
    background: url('assets/envelope/floral3_wax4_poster.webp') center / cover no-repeat;
    transform: scale(1.2);
    filter: blur(52px) saturate(1.35) brightness(0.55);
  }

  .ev-ambient::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 46% 64% at 50% 52%, rgba(255, 228, 194, 0.16), rgba(255, 228, 194, 0) 72%),
      radial-gradient(ellipse at center, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.62) 78%);
  }
}

/* Light falling on the letter, and a falloff into the corners */
.ev-depth {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background:
    radial-gradient(58% 40% at 27% 21%, rgba(255, 246, 229, 0.42), rgba(255, 246, 229, 0) 66%),
    radial-gradient(ellipse 76% 60% at 50% 47%, rgba(0, 0, 0, 0) 44%, rgba(10, 5, 8, 0.3) 80%, rgba(6, 3, 5, 0.58) 100%);
  mix-blend-mode: soft-light;
}

/* A trace of photographic grain */
.ev-depth::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  opacity: 0.055;
  mix-blend-mode: overlay;
}

/* One soft pass of light across the letter, about every seven seconds */
.ev-sheen {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

.ev-sheen::before {
  content: '';
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 0;
  width: 44%;
  background: linear-gradient(100deg,
    rgba(255, 250, 238, 0) 0%,
    rgba(255, 250, 238, 0.14) 40%,
    rgba(255, 253, 246, 0.26) 52%,
    rgba(255, 250, 238, 0.11) 64%,
    rgba(255, 250, 238, 0) 100%);
  filter: blur(7px);
  mix-blend-mode: overlay;
  animation: evSheen 7s cubic-bezier(0.4, 0, 0.5, 1) infinite;
}

@keyframes evSheen {
  0% { transform: translateX(-150%) rotate(7deg); }
  38%, 100% { transform: translateX(330%) rotate(7deg); }
}

/* Initials pressed into the wax and a line on the envelope, placed in fractions of
   the film frame (seal box of floral3 on frame one) so they stay put on any screen.
   The initials leave the moment the film starts; the line fades out with the opening. */
.ev-initials {
  position: absolute;
  left: 49.898%;
  top: 66.638%;
  z-index: 3;
  transform: translate(-50%, -50%);
  color: rgba(84, 52, 24, 0.82);
  font-family: var(--ev-font-body);
  font-size: calc(var(--stage-w) * 0.058);
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255, 236, 200, 0.5), 0 -1px 0 rgba(60, 35, 15, 0.22);
  white-space: nowrap;
  pointer-events: none;
}

.ev-dedication {
  position: absolute;
  left: 50%;
  top: 84%;
  z-index: 3;
  width: 80%;
  margin: 0;
  transform: translate(-50%, -50%);
  color: rgba(122, 92, 62, 0.92);
  font-family: var(--ev-font-body);
  font-size: calc(var(--stage-w) * 0.05);
  font-style: italic;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: center;
  pointer-events: none;
}

/* The temple stands in the garden (fractions of the film frame) behind the envelope.
   Its alpha already hides it behind the painting's trees; script.js uncovers it along
   the edge of the envelope's front as that slides away. */
.ev-temple {
  position: absolute;
  left: 27%;
  bottom: 13.8%;
  z-index: 2;
  width: 46%;
  height: auto;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  pointer-events: none;
}

.ev-reveal.is-playing .ev-initials {
  opacity: 0;
  transition: opacity 120ms ease-out;
}

.ev-reveal.is-playing .ev-dedication {
  opacity: 0;
  transition: opacity 900ms ease 150ms;
}

/* The camera settling as the letter opens */
.ev-reveal.is-playing .ev-stage {
  animation: evSettle 4.2s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes evSettle {
  from { transform: scale(1.035); }
  to { transform: scale(1); }
}

/* The tap invitation: a hand drifting onto the wax (seal box of floral3, first frame) */
.ev-tap {
  position: absolute;
  left: 49.898%;
  top: 66.638%;
  z-index: 4;
  width: 28.038%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ev-tap-glow {
  position: absolute;
  inset: -34%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 250, 240, 0.5) 0%, rgba(255, 250, 240, 0.16) 46%, rgba(255, 250, 240, 0) 70%);
  animation: evTapGlow 2.6s ease-in-out infinite;
}

.ev-tap-hand {
  position: absolute;
  left: 38%;
  top: 41%;
  width: 50%;
  overflow: visible;
  filter: drop-shadow(0 6px 16px rgba(20, 14, 10, 0.5));
  animation: evTapHand 2.6s cubic-bezier(0.33, 0, 0.15, 1) infinite;
}

@keyframes evTapGlow {
  0%, 30% { opacity: 0.25; transform: scale(0.9); }
  44% { opacity: 1; transform: scale(1.06); }
  70%, 100% { opacity: 0.25; transform: scale(0.9); }
}

@keyframes evTapHand {
  0% { transform: translate(9%, 52%) rotate(9deg) scale(1.04); opacity: 0; }
  16% { opacity: 1; }
  38% { transform: translate(0, 0) rotate(0deg) scale(1); }
  46% { transform: translate(0, 7%) rotate(-1.5deg) scale(0.93); }
  60% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  86%, 100% { transform: translate(9%, 52%) rotate(9deg) scale(1.04); opacity: 0; }
}

/* The gesture answers the guest's own finger */
.ev-tap.is-pressed .ev-tap-hand {
  animation: none !important;
  transform: translate(0, 7%) rotate(-1.5deg) scale(0.9) !important;
  opacity: 1 !important;
  transition: transform 120ms ease-out;
}

.ev-tap.is-pressed .ev-tap-glow {
  animation: none !important;
  opacity: 1 !important;
  transform: scale(1.1);
  transition: transform 160ms ease-out;
}

/* The whole screen is the button; the hand above is only its picture */
.ev-hit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ev-hit:focus {
  outline: none;
}

.ev-hit:focus-visible {
  outline: 2px solid rgba(255, 253, 248, 0.9);
  outline-offset: -8px;
}

.ev-skip {
  position: absolute;
  top: 16px;
  inset-inline-start: 16px;
  z-index: 2;
  margin: 0;
  padding: 6px 12px;
  border: 0;
  border-radius: 9999px;
  background-color: rgba(0, 0, 0, 0.45);
  color: #f5f1e8;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ev-skip:focus-visible {
  outline: 2px solid #f5f1e8;
  outline-offset: 2px;
}

/* Less motion: the pointer rests on the seal, light stays still, the camera does not move */
@media (prefers-reduced-motion: reduce) {
  .ev-tap-glow { animation: none; opacity: 0.6; }
  .ev-tap-hand { animation: none; }
  .ev-sheen::before { animation: none; transform: translateX(330%) rotate(7deg); }
  .ev-reveal.is-playing .ev-stage { animation: none; }
}

/* ---------- Music toggle ---------- */

.music-toggle {
  position: fixed;
  top: 16px;
  inset-inline-end: 16px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.45);
  color: #f5f1e8;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.music-toggle svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.music-toggle .icon-off,
.music-toggle.is-muted .icon-on {
  display: none;
}

.music-toggle.is-muted .icon-off {
  display: block;
}

.music-toggle:focus-visible {
  outline: 2px solid #f5f1e8;
  outline-offset: 2px;
}