/* ==========================================================================
   UNSEEN — event teaser
   Palette: wine #6d1819 · cream #f4eee4 · ink #0d0909
   ========================================================================== */

/* The brand serif, self-hosted so there is no third-party request on a
   venue's mobile signal. One weight, roman and italic. The latin-ext files
   carry č, š, ž and the rest — unicode-range means a browser only fetches
   them if the page actually needs those letters, so the teaser never does. */
@font-face{
  font-family:"Newsreader";font-style:normal;font-weight:500;font-display:swap;
  src:url("assets/fonts/newsreader-500.woff2?v=632d9722") 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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Newsreader";font-style:normal;font-weight:500;font-display:swap;
  src:url("assets/fonts/newsreader-500-ext.woff2?v=38390478") 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:"Newsreader";font-style:italic;font-weight:500;font-display:swap;
  src:url("assets/fonts/newsreader-500-italic.woff2?v=cf9e6b4d") 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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Newsreader";font-style:italic;font-weight:500;font-display:swap;
  src:url("assets/fonts/newsreader-500-italic-ext.woff2?v=481a4422") 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;
}

:root{--wine:#6d1819;--cream:#f4eee4;--ink:#0d0909;--muted:#a89c92}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--ink)}
body{color:var(--cream);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.is-locked{overflow:hidden}
img{max-width:100%}

/* --------------------------------------------------------------------------
   Background layers
   -------------------------------------------------------------------------- */

/* The photo treatment, bottom to top:
     0  photo            the frame itself, lightly graded
     1  scrim            darkens only where type sits, so the picture stays alive
     2  vignette         a lens falloff, not a flat veil
     3  halation         warm highlight bloom — how direct flash behaves on film
     4  grain            tiled at native size and blended into the image
     5  spotlight        the cursor's warm glow
     6  content
   Grain and halation sit UNDER the content so they texture the photograph
   without smearing the type. */
.memory-wall,.scrim,.vignette,.halation,.grain,.spotlight{position:fixed;inset:0}
.memory-wall{z-index:0;background:#090707;overflow:hidden}

/* Backgrounds are wide (~1.9:1): on a laptop they show almost the full frame,
   on a portrait phone they crop hard. --pos aims each crop at its own subject. */
.memory{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--pos,50% 50%);
  opacity:0;
  /* --dim is per-image: the night frames sit at .82, a bright daylight frame
     needs more taken off it or the cream type stops being readable. */
  filter:saturate(.86) contrast(1.09) brightness(var(--dim,.82));
  transition:opacity 1.8s ease;background:#090707
}
.memory.is-active{opacity:1}

.scrim{z-index:1;pointer-events:none;background:
  linear-gradient(97deg,rgba(9,6,6,.9) 0%,rgba(9,6,6,.55) 34%,rgba(9,6,6,.12) 64%,rgba(9,6,6,.34) 100%),
  linear-gradient(0deg,rgba(9,6,6,.82) 0%,rgba(9,6,6,.2) 38%,transparent 62%)}

.vignette{z-index:2;pointer-events:none;background:
  radial-gradient(120% 92% at 50% 46%,transparent 42%,rgba(6,4,4,.28) 76%,rgba(6,4,4,.62) 100%)}

.halation{z-index:3;pointer-events:none;mix-blend-mode:screen;opacity:.4;background:
  radial-gradient(58% 44% at 62% 26%,rgba(214,150,96,.16),transparent 68%),
  radial-gradient(46% 40% at 26% 70%,rgba(150,96,96,.11),transparent 70%)}

/* A 180px tile repeated at native size. Left to stretch across the viewport it
   scales into coarse blocks; `overlay` seats the grain in the picture instead
   of laying a grey film over it. */
.grain{
  z-index:4;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;background-repeat:repeat;
}
/* A second, coarser pass — real film grain is not one uniform size. */
.grain::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:inherit;background-size:340px 340px;background-repeat:repeat;
}

.spotlight{z-index:5;pointer-events:none;background:radial-gradient(440px circle at var(--x,70%) var(--y,30%),rgba(140,42,40,.17),transparent 68%)}

/* --------------------------------------------------------------------------
   Revealed page
   -------------------------------------------------------------------------- */

main{
  position:relative;z-index:6;min-height:100svh;
  padding:max(24px,env(safe-area-inset-top)) clamp(24px,5vw,72px) max(24px,env(safe-area-inset-bottom));
  display:flex;flex-direction:column
}
.masthead{display:flex;align-items:flex-start;justify-content:space-between}
.wordmark{display:block;width:clamp(120px,15vw,190px);line-height:0}
.wordmark img{display:block;width:100%;height:auto}
.masthead>span,footer span{font-size:.62rem;line-height:1.3;letter-spacing:.16em;text-transform:uppercase}
.masthead>span{padding-top:.8rem;color:#d0c5bb}

.teaser{width:min(880px,100%);margin:auto 0;padding:9vh 0 7vh}

h1{
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
  font-weight:500;                       /* the brand serif, set with a little more body */
  font-size:clamp(2.6rem,5.55vw,4.95rem);
  line-height:.98;letter-spacing:-.045em;
  margin:0;
}
/* The line breaks are authored, not accidental — hold them at every width.
   The sizes below are set so the longest line clears the narrowest phone. */
.ln{white-space:nowrap}
/* The reveal moves focus here for screen readers; it is not a control,
   so it must not paint a focus ring. */
h1:focus,h1:focus-visible{outline:none}

/* Each line rides up out of its own mask. The mask has to clear the
   descenders, so it is padded and the padding is pulled back off the flow. */
.ln{display:block;overflow:hidden;padding:.06em 0 .16em;margin-bottom:-.16em}
.ln__i{display:block;transform:translateY(112%);opacity:0;will-change:transform}

/* Line one holds; the line under it writes and unwrites itself. It is the same
   sentence, so it is the same size and the same colour — the sizes below are
   set off the longest rotating phrase, not off the fixed line. */
.ln--type{overflow:visible;min-height:1em;color:inherit}
.ln--type .ln__i{white-space:nowrap}

/* A quiet caret, in the colour of the text it follows. A blinking wine bar
   would be exactly the emphasis this line must not have. */
.caret{
  display:inline-block;width:.045em;height:.78em;
  margin-left:.06em;vertical-align:-.05em;
  background:currentColor;opacity:.45;
  animation:caret 1.05s steps(1,end) infinite;
}
@keyframes caret{0%,55%{opacity:.45}56%,100%{opacity:0}}
.is-pausing .caret{animation:none;opacity:.45}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.intro{font-size:clamp(.95rem,1.4vw,1.2rem);line-height:1.6;color:#d7ccc2;margin:2.2rem 0 2.4rem}

/* --------------------------------------------------------------------------
   Signup form
   -------------------------------------------------------------------------- */

.signup{width:min(620px,100%)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.signup__row{display:grid;grid-template-columns:1fr auto;gap:8px}
.signup input[type=email]{
  min-width:0;height:62px;border:1px solid rgba(244,238,228,.5);border-radius:999px;outline:0;
  background:rgba(244,238,228,.94);color:var(--ink);font:500 1rem Arial,sans-serif;padding:0 1.35rem;
  -webkit-appearance:none;appearance:none
}
.signup input[type=email]::placeholder{color:#766d67}
.signup input[type=email]:focus-visible{border-color:var(--cream);box-shadow:0 0 0 3px rgba(244,238,228,.24)}
.signup button{
  height:62px;min-width:205px;border:0;border-radius:999px;background:var(--wine);color:#fff;
  font:600 .84rem Arial,sans-serif;padding:0 1.35rem;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;cursor:pointer;
  transition:background .2s,transform .2s
}
.signup button:hover{background:#842326}
.signup button:active{transform:scale(.98)}
.signup button:disabled{cursor:default;background:#302728}
.signup.is-complete button:disabled{background:#3f1c1d;color:#efe6dc}
.signup__note,.signup__status{font-size:.67rem;line-height:1.5;color:#a99e96;margin:.65rem 0 0}
.signup__status{color:var(--cream);min-height:1rem}
.signup__status:empty{margin:0}
.signup.has-error input[type=email]{border-color:#c66b6d;box-shadow:0 0 0 3px rgba(109,24,25,.24)}
.signup.is-complete input[type=email]{border-color:rgba(244,238,228,.85)}

/* --------------------------------------------------------------------------
   After signup
   The form leaves rather than sitting there greyed out, and this takes its
   place: confirmation first, then the one thing we actually want next.
   -------------------------------------------------------------------------- */

.signup.is-complete{
  opacity:0;transform:translateY(-10px);pointer-events:none;
  transition:opacity .38s ease,transform .38s ease;
}

.afterglow{
  width:min(620px,100%);
  padding:1.9rem 1.9rem 1.7rem;
  border:1px solid rgba(244,238,228,.16);border-radius:20px;
  background:linear-gradient(rgba(28,20,20,.72),rgba(16,11,11,.78));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 24px 60px rgba(0,0,0,.4);
  animation:panel .75s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes panel{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}

/* The brand mark is a wine circle; here it carries the tick. */
.afterglow__mark{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--wine);margin-bottom:1.1rem;
}
.afterglow__mark::after{
  content:"";width:11px;height:6px;margin-top:-3px;
  border-left:2px solid var(--cream);border-bottom:2px solid var(--cream);
  transform:rotate(-45deg);
}

.afterglow__title{
  font-family:"Newsreader",Georgia,serif;font-weight:500;
  font-size:clamp(1.35rem,3vw,1.7rem);line-height:1.2;letter-spacing:-.03em;
  color:var(--cream);margin:0 0 .55rem;
}
.afterglow__line{font-size:.9rem;line-height:1.6;color:#c3b6ac;margin:0 0 1.5rem;max-width:44ch}

.afterglow__actions{display:flex;flex-wrap:wrap;gap:.55rem}
.btn,.ghost{
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:0 1.5rem;border-radius:999px;
  font:600 .76rem Arial,sans-serif;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .2s,border-color .2s,transform .15s;
}
.btn{border:0;background:var(--wine);color:#fff}
.btn:hover{background:#8a2426}
.btn:active,.ghost:active{transform:scale(.98)}
.ghost{border:1px solid rgba(244,238,228,.34);background:transparent;color:var(--cream)}
.ghost:hover{background:rgba(244,238,228,.1);border-color:rgba(244,238,228,.65)}

.afterglow__copied{font-size:.68rem;line-height:1.5;color:#a1948b;margin:1rem 0 0;min-height:1rem}
.afterglow__copied:empty{margin:0;min-height:0}

footer{display:flex;justify-content:space-between;border-top:1px solid rgba(244,238,228,.25);padding-top:1rem;color:#cfc3b9}

/* --------------------------------------------------------------------------
   The entrance
   The headline arrives line by line, then everything under it follows in
   order. Slow enough to be read as it lands, not as decoration.
   -------------------------------------------------------------------------- */

.reveal{opacity:0;transform:translateY(20px)}
body.is-revealed .reveal{animation:enter 1s cubic-bezier(.2,.75,.25,1) forwards}
@keyframes enter{to{opacity:1;transform:none}}

body.is-revealed .ln__i{animation:lineup 1.05s cubic-bezier(.16,.84,.28,1) forwards}
@keyframes lineup{to{transform:none;opacity:1}}

.reveal--1{animation-delay:.1s}                            /* wordmark        */
body.is-revealed .ln:nth-child(1) .ln__i{animation-delay:.3s}
body.is-revealed .ln:nth-child(2) .ln__i{animation-delay:.46s}
.reveal--4{animation-delay:1.25s}                          /* intro           */
.reveal--5{animation-delay:1.55s}                          /* signup form     */
.reveal--6{animation-delay:1.9s}                           /* footer          */

/* --------------------------------------------------------------------------
   Flash gate — tap three times to take three photos
   -------------------------------------------------------------------------- */

.flash-gate{
  position:fixed;inset:0;z-index:120;background:#080606;color:var(--cream);
  padding:max(22px,env(safe-area-inset-top)) clamp(20px,5vw,60px) max(22px,env(safe-area-inset-bottom));
  display:grid;grid-template-rows:auto 1fr auto;gap:1.6rem;overflow:hidden;
  transition:opacity .8s ease,transform .8s cubic-bezier(.7,0,.2,1)
}
.flash-gate::before{content:"";position:absolute;inset:0;opacity:.13;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px 180px;background-repeat:repeat}

.flash-gate__hit{
  position:absolute;inset:0;z-index:8;width:100%;height:100%;border:0;background:transparent;
  cursor:crosshair;touch-action:manipulation;-webkit-tap-highlight-color:transparent
}
.flash-gate__hit:focus-visible{outline:2px solid rgba(244,238,228,.6);outline-offset:-6px}

.flash-gate__top,.flash-gate__bottom{
  position:relative;z-index:9;display:flex;align-items:center;justify-content:space-between;
  font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:#bcb0a7
}
.flash-gate__logo{display:block;width:clamp(132px,18vw,220px);line-height:0}
.flash-gate__logo img{display:block;width:100%;height:auto}
.flash-gate__bottom>div:first-child{display:flex;flex-direction:column;gap:.45rem}
.shot-count{font:600 1.15rem Arial,sans-serif;color:#c66b6d}

.flash-gate__skip{
  border:0;background:transparent;color:#8b8079;cursor:pointer;
  font:500 .58rem Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  padding:.6rem .2rem;opacity:0;pointer-events:none;transition:opacity .5s ease,color .2s
}
.flash-gate__skip:hover{color:var(--cream)}
.flash-gate.show-skip .flash-gate__skip{opacity:1;pointer-events:auto}

.brand-rail{position:absolute;z-index:3;right:-4.7rem;top:50%;transform:rotate(90deg);font-size:.5rem;letter-spacing:.27em;color:rgba(244,238,228,.42);white-space:nowrap}

.viewfinder{
  position:relative;z-index:2;align-self:stretch;justify-self:center;
  width:min(760px,82vw);height:100%;min-height:300px;overflow:hidden;border-radius:clamp(22px,3vw,38px)
}
.polaroid{
  position:absolute;left:50%;top:50%;width:min(62%,380px);height:auto;
  padding:12px 12px 58px;background:#f7f2e9;border-radius:8px;
  opacity:.3;filter:grayscale(1) saturate(.2) contrast(1.08) brightness(.55) blur(4px);
  transform:translate(-50%,-50%) rotate(-1.2deg);
  transition:opacity .22s ease,filter .22s ease,transform .28s ease;
  box-shadow:0 22px 60px rgba(0,0,0,.48)
}
.viewfinder__capture{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center;background:#080606}
.viewfinder.is-captured .polaroid{opacity:1;filter:saturate(.82) contrast(1.04) brightness(1) blur(0);transform:translate(-50%,-50%) rotate(0)}
/* Once a photo has been taken the frame stays fully lit. Nothing dims it
   again — the picture is the reward and must not be dulled to make room
   for a caption. */

.viewfinder__noise{position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.018) 50%,transparent 50%);background-size:100% 4px;opacity:.5}
.viewfinder__message{
  position:absolute;left:50%;top:50%;margin:0;transform:translate(-50%,-50%);
  width:max-content;max-width:84%;display:flex;flex-direction:column;gap:.48rem;
  padding:1rem 1.2rem;border:1px solid rgba(244,238,228,.15);border-radius:18px;
  background:rgba(8,6,6,.82);text-transform:uppercase;transition:opacity .25s;
  box-shadow:0 14px 44px rgba(0,0,0,.28)
}
.viewfinder__action{font:700 clamp(.75rem,1.5vw,.95rem)/1 Arial,sans-serif;letter-spacing:.16em;color:var(--cream)}
.viewfinder__hint{font:500 .52rem/1.45 Arial,sans-serif;letter-spacing:.12em;color:#bcb0a7}
/* The prompt sits on the photograph throughout — opening instruction and
   running commentary are the same chip, so nothing below the frame moves and
   the eye never has to travel. The dark plate keeps it readable over a lit
   frame without dimming the picture itself. */
.viewfinder.is-flashing-out .viewfinder__message{opacity:0}

.camera-flash{position:absolute;inset:0;z-index:20;background:#fff;opacity:0;pointer-events:none}
.flash-gate.is-flashing .camera-flash{animation:camera-flash .48s ease-out}
.flash-gate.is-flashing .viewfinder{animation:camera-kick .26s ease-out}
@keyframes camera-flash{0%{opacity:0}8%{opacity:1}28%{opacity:.92}100%{opacity:0}}
@keyframes camera-kick{40%{transform:scale(.985)}}
.flash-gate.is-complete{opacity:0;transform:scale(1.04);pointer-events:none}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media(max-width:640px){
  main{padding-left:20px;padding-right:20px}
  .masthead{justify-content:center}
  .teaser{padding:7vh 0 4vh;text-align:center}
  /* Sized off the longest line, "Your best memories," so both hold as
     authored down to a 320px screen. */
  h1{font-size:10.2vw;line-height:1.06}
  .intro{font-size:.95rem;margin:1.5rem auto 1.9rem;max-width:350px}
  /* Portrait is a single centred column: the label, the field, the button and
     the note all sit on the same axis as the headline. */
  .signup{margin:0 auto;text-align:center}
  .signup__row{grid-template-columns:1fr;gap:10px}
  .signup input[type=email],.signup button{height:58px;width:100%;min-width:0}
  .signup input[type=email]{text-align:center}
  .signup button{padding:0 1.5rem;justify-content:center;gap:.8rem}
  .signup__note,.signup__status{text-align:center}
  .afterglow{margin:0 auto;text-align:center;padding:1.7rem 1.3rem 1.5rem;border-radius:18px}
  .afterglow__mark{margin-left:auto;margin-right:auto}
  .afterglow__line{margin-left:auto;margin-right:auto}
  .afterglow__actions{flex-direction:column;gap:.5rem}
  .btn,.ghost{width:100%}
  /* Portrait: type runs down the middle, so the scrim works bottom-up. */
  .scrim{background:linear-gradient(0deg,rgba(9,6,6,.88) 0%,rgba(9,6,6,.5) 44%,rgba(9,6,6,.22) 72%,rgba(9,6,6,.42) 100%)}
  .vignette{background:radial-gradient(112% 78% at 50% 42%,transparent 46%,rgba(6,4,4,.3) 78%,rgba(6,4,4,.58) 100%)}
  .halation{opacity:.32}
  .grain{opacity:.19}
  footer{margin-top:2rem}

  /* The gate and the revealed page must not shuffle the wordmark between
     them: same width, same distance from the top edge. */
  .flash-gate{gap:1rem;padding:max(24px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom))}
  .flash-gate__top{justify-content:center}
  .flash-gate__logo{width:120px}
  .brand-rail{display:none}
  .viewfinder{width:100%;min-height:0;border-radius:24px}
  .polaroid{width:min(88%,330px);padding:9px 9px 48px;border-radius:7px;opacity:.36;filter:grayscale(1) saturate(.2) contrast(1.08) brightness(.58) blur(3px)}
  .viewfinder__message{max-width:90%;padding:.9rem 1rem;border-radius:16px;text-align:center}
  .viewfinder__action{font-size:.66rem;line-height:1.25}
}

@media(max-height:740px) and (max-width:640px){
  .teaser{padding:5vh 0 3vh}
  /* Short screens: a shade smaller, to save height. */
  h1{font-size:9.6vw}
  .intro{margin:1rem 0 1.2rem}
  .signup input[type=email],.signup button{height:48px}
  .btn,.ghost{height:44px}
  .afterglow{padding:1.4rem 1.2rem 1.2rem}
}

@media(prefers-reduced-motion:reduce){
  .memory{transition:opacity .3s}
  .caret{display:none}
  /* No staging: the headline, the rule and everything under them are simply
     there. Nothing depends on an animation having run. */
  .ln__i{transform:none;opacity:1}
  body.is-revealed .ln__i{animation:none}
  .reveal,.afterglow{opacity:1;transform:none;animation:none}
  .signup button,.flash-gate,.polaroid{transition:none}
  .flash-gate.is-flashing .camera-flash{animation:camera-flash .15s}
  .flash-gate.is-flashing .viewfinder{animation:none}
}

/* Privacy sits bottom-left in place of a wordmark, deliberately small. */
footer a{font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:#8d8078;text-decoration:none;transition:color .2s}
footer a:hover{color:var(--cream)}
.signup__note a{color:inherit;text-decoration:underline;text-underline-offset:2px;opacity:.85}
.signup__note a:hover{opacity:1}
@media(max-width:640px){footer{gap:1rem;font-size:.58rem}}