/* ==========================================================================
   Beans — landing
   Design source: Figma “Beans” › Landing › Wireframe 6 / 7 / 9 / 10 / 13
   Base artboard 1440 × 1024. Everything below is expressed in those design
   units and multiplied by --u, so the page scales with the viewport.
   ========================================================================== */

/* ── Fonts ────────────────────────────────────────────────────────────── */
@font-face{font-family:"Inter Display";src:url("assets/fonts/InterDisplay-Bold.ttf") format("truetype");font-weight:700;font-display:block}
@font-face{font-family:"Mattone";src:url("assets/fonts/Mattone-Bold.otf") format("opentype");font-weight:700;font-display:block}
@font-face{font-family:"Bangers";src:url("assets/fonts/Bangers-Regular.ttf") format("truetype");font-display:block}
@font-face{font-family:"Climate Crisis";src:url("assets/fonts/ClimateCrisis-Variable.ttf") format("truetype-variations");font-display:block}
@font-face{font-family:"Pilowlava";src:url("assets/fonts/Pilowlava-Regular.otf") format("opentype");font-display:block}
@font-face{font-family:"LCT Mogi C";src:url("assets/fonts/LCTMogi-C.otf") format("opentype");font-display:block}
@font-face{font-family:"Just Me Again Down Here";src:url("assets/fonts/JustMeAgainDownHere-Regular.ttf") format("truetype");font-display:block}

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root{
  --bg:#282625;
  --text:#ffffff;
  --text-warm:#fffdf8;
  --nav:#f4efe7;
  --muted:#746f69;
  --accent:#faaa16;
  --btn-dark:#24211f;
  --shutter-dark:#212121;

  /* 1 design pixel. Height-led, because the artboard is 1440×1024 (1.41)
     and most screens are wider than that — the extra width is absorbed by
     the layout rather than by scaling the type up. */
  --u: min(calc(100vw / 1440), calc(100dvh / 1024));

  /* horizontal gutter: proportional, so wide screens breathe */
  --gutter: clamp(20px, 5.55vw, 160px);

  --body: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  /* first shot — kept here so the frame is right before JS runs.
     d* = desktop Package rect, m* = the 393x852 one, both from Figma. */
  --pkg-dx:373.96; --pkg-dy:84.12; --pkg-dw:663.90; --pkg-dh:611.75; --pkg-drot:5.49;
  --pkg-mx:79.50; --pkg-my:206.02; --pkg-mw:328.17; --pkg-mh:328.17; --pkg-mrot:-10.30;
  --snap-family:"Bangers"; --snap-weight:400; --snap-vars:normal;
  --snap-size:110; --snap-ls:0; --snap-shift:0; --snap-fit:1;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}

/* ── Stage ────────────────────────────────────────────────────────────── */
.stage{
  position:fixed;
  inset:0;
  overflow:hidden;
  background:var(--bg);
  isolation:isolate;
}
/* the artboard’s two inner shadows */
.stage::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  z-index:6;
  box-shadow:
    inset 0 calc(-100 * var(--u)) calc(100 * var(--u)) rgba(0,0,0,.25),
    inset 0 calc(100 * var(--u)) calc(100 * var(--u)) rgba(255,255,255,.06);
}

/* film grain over everything */
.grain{
  position:absolute;inset:0;
  z-index:7;
  pointer-events:none;
  opacity:.62;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:calc(240 * var(--u)) calc(240 * var(--u));
}

/* ── Viewfinder ───────────────────────────────────────────────────────── */
.viewfinder{
  position:absolute;
  top:0;left:0;right:0;
  height:calc(100% - 276 * var(--u));   /* 1024 − 748 = 276 */
  border-radius:calc(120 * var(--u));
  background:rgba(255,255,255,.1);
  box-shadow:
    inset 0 calc(-24 * var(--u)) calc(64 * var(--u)) rgba(255,255,255,.25),
    inset 0 calc(-3 * var(--u)) calc(1 * var(--u)) rgba(255,255,255,.25);
  z-index:1;
}

/* rule-of-thirds guides */
.vf-grid{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.vf-grid i{position:absolute;background:#d9d9d9;opacity:.09}
.vf-grid__h{left:0;right:0;height:calc(2 * var(--u))}
.vf-grid__h--top{top:calc(230 * var(--u))}
.vf-grid__h--bottom{bottom:calc(230 * var(--u))}
.vf-grid__v{top:0;bottom:0;width:calc(2 * var(--u))}
.vf-grid__v--left{left:29.3%}
.vf-grid__v--right{right:28.4%}

/* orange corner brackets */
.vf-corners{position:absolute;inset:calc(20 * var(--u));pointer-events:none}
.vf-corner{
  position:absolute;
  width:calc(360 * var(--u));
  height:calc(187 * var(--u));
  background:url("assets/svg/vf-corner.svg") no-repeat center/100% 100%;
  filter:drop-shadow(0 calc(23 * var(--u)) calc(12 * var(--u)) rgba(0,0,0,.1));
}
.vf-corner--tl{top:0;left:0}
.vf-corner--tr{top:0;right:0;transform:scaleX(-1)}
.vf-corner--bl{bottom:0;left:0;transform:scaleY(-1)}
.vf-corner--br{bottom:0;right:0;transform:scale(-1,-1)}

/* ── Headline ─────────────────────────────────────────────────────────── */
.headline{
  position:absolute;
  left:var(--gutter);
  /* top-anchored, not centred: "Taste it" sits at design y=218 whatever the
     Snap line happens to be, so nothing shifts between shots */
  top:calc(50% - 156 * var(--u));
  margin:0;
  display:flex;
  flex-direction:column;
  gap:0;                       /* the Figma stack is flush; the line boxes do the spacing */
  color:var(--text);
  white-space:nowrap;
  filter:drop-shadow(0 calc(4 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,.25));
  font-weight:700;
}
.headline--under{z-index:2}
.headline--over{z-index:4;mix-blend-mode:soft-light}

.headline__line{display:block}
.headline__line--taste,
.headline__line--share{
  font-family:"Inter Display","Inter",system-ui,sans-serif;
  font-size:calc(110 * var(--u));
  line-height:calc(110 * var(--u));
  height:calc(110 * var(--u));
  letter-spacing:calc(-8 * var(--u));
}
/* Fixed box, whatever the face — 100 in Figma, the same on every shot, so the
   block is a flat 320 and "Share it" never moves. Each display font has its
   own metrics, so the glyphs are optically centred in the box and can be
   nudged per shot with --snap-shift. */
.headline__line--snap{
  display:flex;
  align-items:center;
  height:calc(100 * var(--u));
  font-family:var(--snap-family);
  font-weight:var(--snap-weight,400);
  font-variation-settings:var(--snap-vars,normal);
  font-size:calc(var(--snap-size) * var(--snap-fit,1) * var(--u));
  line-height:1;
  letter-spacing:calc(var(--snap-ls,0) * var(--u));
  transform:translateY(calc(var(--snap-shift,0) * var(--u)));
}

/* ── Package ──────────────────────────────────────────────────────────── */
/* The Package rect, reproduced exactly: positioned at the rect's own origin
   and rotated about it, which is how Figma applies node rotation. */
.package{
  position:absolute;
  z-index:3;
  /* anchored to the middle of the viewfinder, not its edges: the artboard is
     1440 x 748, so the rect's Figma origin is expressed as an offset from
     (720, 374). At the design ratio this is identical to placing it from the
     top-left; on a wider or taller window the artwork travels with the centre
     instead of being left behind at an edge. */
  left:calc(50% + (var(--pkg-dx) - 720) * var(--u));
  top:calc(50% + (var(--pkg-dy) - 374) * var(--u));
  width:calc(var(--pkg-dw) * var(--u));
  height:calc(var(--pkg-dh) * var(--u));
  transform-origin:0 0;
  transform:rotate(calc(var(--pkg-drot) * -1deg));
  pointer-events:none;
}
.package__img{
  width:100%;height:100%;
  object-fit:cover;            /* Figma's FILL */
  transition:opacity .18s ease, transform .32s cubic-bezier(.22,.9,.28,1);
}
.stage.is-shooting .package__img{opacity:0;transform:scale(.965)}

/* ── Taglines ─────────────────────────────────────────────────────────── */
.tagline{
  position:absolute;
  bottom:calc(91 * var(--u));
  margin:0;
  z-index:5;
  color:var(--text-warm);
  font-size:calc(20 * var(--u));
  line-height:calc(32.5 * var(--u));
  filter:drop-shadow(0 calc(4 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,.25));
}
.tagline--left{left:var(--gutter);width:calc(554 * var(--u));text-align:left}
.tagline--right{right:var(--gutter);width:calc(589 * var(--u));text-align:right}

/* ── Bars ─────────────────────────────────────────────────────────────── */
.topbar,
.footbar{
  position:absolute;
  left:0;right:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(40 * var(--u));
  padding-inline:var(--gutter);
}
.topbar{top:0;height:calc(192 * var(--u))}
.footbar{bottom:calc(58 * var(--u));height:calc(168 * var(--u))}

.logo{flex:none}
.logo img{width:calc(199 * var(--u));height:auto}
.pill{flex:none}

.footbar__meta{display:flex;flex-direction:column;gap:calc(8 * var(--u));align-items:flex-end}
.footnav{display:flex;gap:calc(24 * var(--u))}
.footnav a{
  font-family:"Mattone",var(--body);
  font-weight:700;
  font-size:calc(14 * var(--u));
  line-height:calc(20 * var(--u));
  color:var(--nav);
  transition:opacity .18s ease;
}
.footnav a:hover{opacity:.65}
.copyright{
  font-size:calc(12 * var(--u));
  line-height:calc(16 * var(--u));
  color:var(--muted);
}

/* ── “Get the app” pills ──────────────────────────────────────────────── */
.pill{
  display:inline-flex;
  align-items:center;
  height:calc(80 * var(--u));   /* fixed in Figma, not hugged */
  border-radius:9999px;
  border:calc(2 * var(--u)) solid transparent;
  padding:calc(20 * var(--u)) calc(40 * var(--u));
  font-family:"Mattone",var(--body);
  font-weight:700;
  font-size:calc(20 * var(--u));
  line-height:calc(20 * var(--u));
  white-space:nowrap;
  transition:transform .18s ease, filter .18s ease;
}
.pill:hover{transform:translateY(calc(-2 * var(--u)));filter:brightness(1.04)}
.pill:active{transform:translateY(0)}
.pill__icon{
  width:calc(28 * var(--u));
  height:calc(28 * var(--u));
  background:currentColor;
  -webkit-mask:url("assets/svg/apple.svg") no-repeat center/contain;
  mask:url("assets/svg/apple.svg") no-repeat center/contain;
  flex:none;
}
.pill--light{
  gap:calc(12 * var(--u));
  background:#fff;
  border-color:rgba(215,215,215,.7);
  color:#282625;
  box-shadow:
    inset 0 calc(-19 * var(--u)) calc(19 * var(--u)) rgba(255,255,255,1),
    inset 0 calc(5 * var(--u)) calc(10 * var(--u)) rgba(255,255,255,1);
}
.pill--dark{
  gap:calc(8 * var(--u));
  background:var(--btn-dark);
  color:#fff;
  border-color:transparent;
  background-image:linear-gradient(var(--btn-dark),var(--btn-dark)),
                   linear-gradient(90deg,rgba(215,215,215,.7),rgba(113,113,113,.7));
  background-origin:border-box;
  background-clip:padding-box,border-box;
  box-shadow:
    inset 0 calc(-10 * var(--u)) calc(20 * var(--u)) rgba(255,255,255,.2),
    inset 0 calc(5 * var(--u)) calc(10 * var(--u)) rgba(255,255,255,.1),
    inset 0 calc(-5 * var(--u)) calc(10 * var(--u)) rgba(255,255,255,.2);
}

/* ── Shutter ──────────────────────────────────────────────────────────── */
.shutter{
  position:absolute;
  left:50%;
  bottom:calc(52 * var(--u));
  z-index:5;
  width:calc(180 * var(--u));
  height:calc(181 * var(--u));
  transform:translateX(-50%);
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--shutter-dark);
  box-shadow:0 0 0 calc(6 * var(--u)) rgba(255,255,255,.7);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:transform .12s ease, box-shadow .18s ease;
}
.shutter:hover{box-shadow:0 0 0 calc(6 * var(--u)) rgba(255,255,255,.9)}
.shutter:focus-visible{outline:calc(3 * var(--u)) solid var(--accent);outline-offset:calc(10 * var(--u))}
.shutter:active,
.stage.is-shooting .shutter{transform:translateX(-50%) scale(.94)}

.shutter__disc{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#fff;
  box-shadow:
    inset 0 calc(27 * var(--u)) calc(67 * var(--u)) calc(-14 * var(--u)) rgba(0,0,0,.2),
    inset 0 calc(-13 * var(--u)) calc(13 * var(--u)) rgba(255,255,255,1),
    inset 0 calc(3 * var(--u)) calc(7 * var(--u)) rgba(255,255,255,.2);
}

/* shutter flash */
.flash{
  position:absolute;inset:0;
  z-index:6;
  pointer-events:none;
  background:#fff;
  opacity:0;
}
.stage.is-shooting .flash{animation:flash .34s ease-out}
@keyframes flash{
  0%{opacity:0}
  12%{opacity:.28}
  100%{opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .package__img,.pill,.shutter{transition:none}
  .stage.is-shooting .flash{animation:none}
  .stage.is-shooting .package__img{opacity:1;transform:none}
}

/* ── Portrait / small screens ─────────────────────────────────────────────
   Portrait (aspect ≤ 9/10) gets its own artboard:
   Figma › Land final › “iPhone 16 - 1”, 393 × 852.
   Not the desktop frame shrunk — the type, the viewfinder proportions, the
   brackets and the footer are all drawn differently there, so --u is rebased
   on 393 × 852 and the numbers below come from that frame.
   ------------------------------------------------------------------------ */
@media (max-aspect-ratio: 9/10){
  :root{
    --u: min(calc(100vw / 393), calc(100dvh / 852));
    --gutter: clamp(calc(28 * var(--u)), 10.18%, calc(96 * var(--u)));

  }

  .stage::before{
    box-shadow:
      inset 0 calc(-100 * var(--u)) calc(100 * var(--u)) rgba(0,0,0,.25),
      inset 0 calc(100 * var(--u)) calc(100 * var(--u)) rgba(255,255,255,.06);
  }

  /* viewfinder: 393 × 620 of 852 */
  .viewfinder{
    height:calc(100% - 232 * var(--u));
    border-radius:calc(50 * var(--u));
  }
  .vf-grid__h--top{top:30.66%}
  .vf-grid__h--bottom{bottom:30.74%}
  .vf-grid__v--left{left:29.6%}
  .vf-grid__v--right{right:28.0%}

  .vf-corner{
    width:calc(93.25 * var(--u));
    height:calc(150 * var(--u));
    background-image:url("assets/svg/vf-corner-mobile.svg");
  }

  /* top bar: 393 × 125, 40 padding */
  .topbar{height:calc(125 * var(--u));gap:calc(12 * var(--u))}
  .logo img{width:calc(99.5 * var(--u))}
  .pill{
    height:calc(45 * var(--u));
    font-size:calc(15 * var(--u));
    line-height:calc(15 * var(--u));
    padding:calc(12 * var(--u)) calc(20 * var(--u));
    border-width:calc(1.5 * var(--u));
  }
  .pill--light{
    gap:calc(9 * var(--u));
    box-shadow:none;              /* the inner glows are switched off on mobile */
  }
  .pill__icon{width:calc(21 * var(--u));height:calc(21 * var(--u))}

  /* headline: 40, 117 — 82.5/82.5, gap 3 */
  .headline{
    top:calc(117 * var(--u));
    gap:calc(3 * var(--u));
  }
  .headline__line--snap{
    height:calc(60 * var(--u));
    font-size:calc(82.5 * var(--snap-fit,1) * var(--u));
    letter-spacing:calc(var(--snap-ls,0) * 0.75 * var(--u));
    transform:translateY(calc(var(--snap-shift,0) * 0.75 * var(--u)));
  }
  .headline__line--taste,
  .headline__line--share{
    font-size:calc(82.5 * var(--u));
    line-height:calc(82.5 * var(--u));
    height:calc(82.5 * var(--u));
    letter-spacing:calc(-6 * var(--u));
  }

  /* artwork keeps each shot's own proportions, sized and centred the way the
     iPhone frame places it */
  /* the iPhone frames place the artwork themselves — same rect model, their
     own numbers */
  .package{
    /* same, against the phone frame's 393 x 620 */
    left:calc(50% + (var(--pkg-mx) - 196.5) * var(--u));
    top:calc(50% + (var(--pkg-my) - 310) * var(--u));
    width:calc(var(--pkg-mw) * var(--u));
    height:calc(var(--pkg-mh) * var(--u));
    transform:rotate(calc(var(--pkg-mrot) * -1deg));
  }

  /* taglines: 313 wide at y 440 and 520, inside the viewfinder */
  .tagline{
    left:var(--gutter);
    right:var(--gutter);
    width:auto;
    font-size:calc(16 * var(--u));
    line-height:calc(20 * var(--u));
  }
  .tagline--left{bottom:calc(120 * var(--u));text-align:left}
  .tagline--right{bottom:calc(40 * var(--u));text-align:right}

  /* shutter: 80 × 80, centred, 40 below the viewfinder */
  .shutter{
    bottom:calc(112 * var(--u));
    width:calc(80 * var(--u));
    height:calc(80 * var(--u));
    box-shadow:0 0 0 calc(2.75 * var(--u)) rgba(255,255,255,.7);
  }
  .shutter:hover{box-shadow:0 0 0 calc(2.75 * var(--u)) rgba(255,255,255,.9)}
  .shutter__disc{
    box-shadow:
      inset 0 calc(12 * var(--u)) calc(30 * var(--u)) calc(-6 * var(--u)) rgba(0,0,0,.2),
      inset 0 calc(-6 * var(--u)) calc(6 * var(--u)) rgba(255,255,255,1),
      inset 0 calc(1.5 * var(--u)) calc(3 * var(--u)) rgba(255,255,255,.2);
  }

  /* footer: no CTA on mobile, just the small print, centred */
  .footbar{
    bottom:calc(32 * var(--u));
    height:auto;
    justify-content:center;
  }
  .pill--dark{display:none}
  .footbar__meta{align-items:center;gap:calc(8 * var(--u))}
  .footnav{gap:calc(24 * var(--u))}
  .footnav a{font-size:calc(14 * var(--u));line-height:calc(20 * var(--u))}
  .copyright{font-size:calc(12 * var(--u));line-height:calc(16 * var(--u))}
}

/* very short landscape phones — keep the frame from collapsing */
@media (max-height: 460px) and (min-aspect-ratio: 9/10){
  .tagline{display:none}
  .headline{top:calc(50% - 156 * var(--u))}
}