* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --ink: #f3efe6;
  --ink-dim: rgba(243, 239, 230, .74);
  --ink-faint: rgba(243, 239, 230, .62);
  --gold: #cba25a;
  --void: #07070a;
  --duo-shadow: #0a0a12;
  --duo-light: #d9a24e;
  --ease: cubic-bezier(.16,.84,.44,1);
}

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--void);
  color: var(--ink);
  font-family: 'Archivo', -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- intro curtain ---------- */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--void);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: curtain-out .7s var(--ease) .6s forwards;
  pointer-events: none;
}
.curtain-mark {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2rem, 8vw, 3rem);
  letter-spacing: .5em;
  padding-left: .5em;
  color: var(--ink);
  opacity: 0;
  animation: curtain-mark-in .6s var(--ease) .1s forwards;
}
@keyframes curtain-mark-in {
  from { opacity: 0; letter-spacing: .9em; }
  to   { opacity: 1; letter-spacing: .5em; }
}
@keyframes curtain-out {
  to { opacity: 0; visibility: hidden; }
}

/* ---------- film grain ---------- */
.noise {
  position: fixed;
  inset: -60px;
  z-index: 40;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grain 1.4s steps(4) infinite;
}
@keyframes grain {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-2%,1%); }
  50%  { transform: translate(1%,-2%); }
  75%  { transform: translate(-1%,-1%); }
  100% { transform: translate(0,0); }
}

/* ---------- stage ---------- */
.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* photo occupies the left side of the frame, à la Capriati but committed further left */
.photo-panel {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(-6%, 0, 0);
  animation: panel-in 1.5s var(--ease) .1s forwards;
}
@keyframes panel-in {
  from { opacity: 0; transform: translate3d(-9%, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 14% 14%;
  transform: scale(1.06);
  filter: grayscale(1) contrast(1.2) brightness(.6);
}

.duo {
  position: absolute;
  inset: 0;
  mix-blend-mode: color;
  background: linear-gradient(160deg, var(--duo-shadow) 0%, var(--duo-shadow) 45%, var(--duo-light) 100%);
  opacity: .75;
}

.vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 70% at 30% 10%, rgba(7,7,10,0) 0%, rgba(7,7,10,.4) 55%, rgba(7,7,10,.97) 100%),
    linear-gradient(to bottom, rgba(7,7,10,.55) 0%, rgba(7,7,10,.05) 20%, rgba(7,7,10,.2) 55%, rgba(7,7,10,.97) 96%);
}

/* fades the photo into the void toward the right so it reads as a panel, not a poster */
.panel-edge {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 0%, transparent 38%, var(--void) 84%);
}

.content-col {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (min-width: 900px) {
  .photo-panel { width: 52vw; }
  .panel-edge { background: linear-gradient(to right, transparent 0%, transparent 55%, var(--void) 96%); }
  .content-col { align-items: flex-end; text-align: right; padding-right: 4vw; }
  .content-col .top,
  .content-col .content,
  .content-col .links { align-items: flex-end; }
  .top { justify-content: flex-end; gap: 2rem; }
  .mark { justify-content: flex-end; }
  .ticker { mask-image: linear-gradient(to right, transparent, black 30%, black 88%, transparent); }
}

/* ---------- grid deco lines ---------- */
.grid-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  padding: 0 6vw;
  pointer-events: none;
}
.grid-lines span {
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(243,239,230,.06) 30%, rgba(243,239,230,.06) 70%, transparent);
}
.grid-lines span:nth-child(2) { display: none; }
@media (min-width: 720px) {
  .grid-lines span:nth-child(2) { display: block; }
}

/* ---------- top bar ---------- */
.top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: max(5vh, 24px) 6vw 0;
  font-size: .62rem;
  letter-spacing: .22em;
  color: var(--ink-dim);
  opacity: 0;
  animation: rise-in .7s var(--ease) .5s forwards;
}
.rec {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  color: var(--ink-dim);
}
.rec i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e14b3d;
  box-shadow: 0 0 8px #e14b3d;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

/* ---------- mark (real logo asset) ---------- */
.mark {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  margin-top: 6vh;
}
.mark-logo {
  width: clamp(7.5rem, 26vw, 15rem);
  height: auto;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.55));
  opacity: 0;
  transform: translateY(28px) scale(.94);
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.55)) blur(8px);
  animation: mark-in 1.2s var(--ease) .55s forwards;
}
@keyframes mark-in {
  to { opacity: 1; transform: translateY(0) scale(1); filter: drop-shadow(0 6px 24px rgba(0,0,0,.55)) blur(0); }
}

/* ---------- ticker ---------- */
.ticker {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow: hidden;
  margin-top: 3.4vh;
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  opacity: 0;
  animation: rise-in .7s var(--ease) .95s forwards;
}
.ticker-track {
  display: inline-flex;
  white-space: nowrap;
  font-family: 'Archivo', sans-serif;
  font-weight: 500;
  font-size: .64rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-faint);
  animation: scroll-left 22s linear infinite;
}
.ticker-track span { flex: none; }
.ticker-track span:nth-child(odd):not(:first-child) { color: var(--gold); }
@keyframes scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- content ---------- */
.content {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  opacity: 0;
  animation: rise-in .7s var(--ease) .78s forwards;
}

.tagline {
  font-weight: 300;
  font-size: clamp(.95rem, 3.6vw, 1.15rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}
.tagline .amp {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0;
  color: var(--gold);
  padding: 0 .12em;
}

.label {
  font-size: clamp(.72rem, 2.6vw, .82rem);
  letter-spacing: .1em;
  color: var(--ink-dim);
}
.label a {
  color: var(--gold);
  text-decoration: none;
  position: relative;
}
.label a span {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size .35s var(--ease);
}
.label a:hover span,
.label a:focus-visible span {
  background-size: 100% 1px;
}

/* ---------- links ---------- */
.links {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 2.1rem;
  align-items: center;
  justify-content: center;
  margin-top: 2.6vh;
  opacity: 0;
  animation: rise-in .7s var(--ease) 1.08s forwards;
}

.link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: var(--ink);
  text-decoration: none;
}

.link svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
  opacity: .82;
  transition: opacity .3s var(--ease), transform .35s var(--ease);
}

.link-label {
  font-size: .56rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.link:hover svg,
.link:focus-visible svg {
  opacity: 1;
  transform: translateY(-3px);
}
.link:hover .link-label,
.link:focus-visible .link-label {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- footer ---------- */
.foot {
  position: relative;
  z-index: 2;
  display: flex;
  gap: .6em;
  justify-content: center;
  padding: 3.2vh 0 max(4vh, 22px);
  font-size: .58rem;
  letter-spacing: .28em;
  color: var(--ink-faint);
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
  opacity: 0;
  animation: rise-in .7s var(--ease) 1.2s forwards;
}
.foot-sep { color: var(--gold); }

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

@media (min-width: 720px) {
  .links { gap: 3rem; }
  .top { padding: 6vh 6vw 0; font-size: .68rem; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .curtain, .curtain-mark, .photo-panel, .mark-logo, .top, .content, .links, .foot, .ticker { animation: none !important; opacity: 1 !important; transform: none !important; }
  .mark-logo { filter: drop-shadow(0 6px 24px rgba(0,0,0,.55)) !important; }
  .curtain { display: none; }
  .ticker-track { animation: none; }
  .noise { display: none; }
}