/* ==========================================================================
   freecupholder.zip — extracted from the inline <style> block of the
   dc-runtime preview export. Served as a static file so the CSP does not
   need script-src 'unsafe-inline'.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SELF-HOSTED FONTS
   --------------------------------------------------------------------------
   No fonts.googleapis.com, no fonts.gstatic.com. Nothing on this page talks
   to Google. That keeps the "zero trackers" claim literally true (Google
   Fonts logs the visitor IP on every request), removes two DNS lookups and
   two TLS handshakes from the critical path, and let the CSP drop both hosts
   from style-src/font-src.

   Only the weights actually used are shipped:
     Chakra Petch   600, 700   (static faces)
     IBM Plex Mono  400        (static face)
     Noto Sans JP   variable   (wght 100-900, single file)

   Licence: all three are SIL Open Font License 1.1 — self-hosting and
   redistribution are expressly permitted. See assets/fonts/OFL.txt.

   ⚠ Noto Sans JP is SUBSET to the 49 CJK glyphs this page uses. Adding new
   Japanese text to the markup will render it in a fallback font until the
   subset is regenerated — see deploy/DEPLOY.md §7.
   -------------------------------------------------------------------------- */

@font-face{
  font-family:'Chakra Petch';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/chakra-petch-600.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:'Chakra Petch';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/chakra-petch-700.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:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/ibm-plex-mono-400.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;
}
/* Variable font: ONE file covers every weight via the wght axis. The declared
   `font-weight: 100 900` range is required — this face's internal default is
   100 (Thin), so pinning a single value here would render the 400-weight text
   noticeably thinner than intended. */
@font-face{
  font-family:'Noto Sans JP';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/assets/fonts/noto-sans-jp.woff2') format('woff2');
  unicode-range:U+3055,U+305F,U+306F,U+308C,U+30A2,U+30AF,U+30B7,U+30B9,U+30BB,U+30C6,U+30E0,U+4E2D,U+4EA4,U+4F5C,U+4FB5,U+4FE1,U+5143,U+5165,U+52D5,U+53D6,U+53EF,U+58C1,U+58CA,U+5BFE,U+5C55,U+5F97,U+63A5,U+6709,U+672A,U+672C,U+691C,U+77E5,U+7834,U+78BA,U+7A7A,U+7A81,U+7ACB,U+7D42,U+7D9A,U+80FD,U+8133,U+8A31,U+8C61,U+8EAB,U+9001,U+958B,U+9593,U+9632,U+96FB;
}

html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:#0a0700;color:#d6c7ab;font-family:'IBM Plex Mono',monospace;-webkit-font-smoothing:antialiased}
input,textarea,button{font:inherit}
a{color:#ffc94d;text-decoration:none}
a:hover{color:#ff3b00}
::selection{background:#ff3b00;color:#0a0700}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0a0700}
::-webkit-scrollbar-thumb{background:#141d33;border:1px solid #1f2b4a}

@keyframes scanbar{0%{top:-10%}100%{top:110%}}
@keyframes flick{0%,91%,100%{opacity:1}92%{opacity:.4}93%{opacity:1}96%{opacity:.65}97%{opacity:1}}
@keyframes gl{0%,10%,15%,44%,49%,73%,79%,100%{text-shadow:2px 0 rgba(255,59,0,.5),-2px 0 rgba(255,176,0,.5);transform:none;opacity:1}11%{text-shadow:-9px 0 rgba(255,59,0,.9),9px 0 rgba(255,176,0,.9);transform:skewX(-7deg) translateX(4px)}12%{text-shadow:7px 0 rgba(255,59,0,.9),-8px 0 rgba(255,176,0,.9);transform:translateX(-6px);opacity:.8}13%{text-shadow:-4px 2px rgba(255,59,0,.7),4px -2px rgba(255,176,0,.7);transform:skewX(4deg)}45%{text-shadow:-6px 0 rgba(255,59,0,.85),6px 0 rgba(255,176,0,.85);transform:skewX(5deg) scaleX(1.02)}46%{text-shadow:10px 0 rgba(255,59,0,.9),-10px 0 rgba(255,176,0,.9);transform:translateX(7px);opacity:.85}47%{text-shadow:-5px 0 rgba(255,59,0,.7),5px 0 rgba(255,176,0,.7);transform:translateX(-3px) skewX(-3deg)}74%{text-shadow:-7px 0 rgba(255,59,0,.85),7px 0 rgba(255,176,0,.85);transform:skewX(-6deg) translateX(-5px);opacity:.9}75%{text-shadow:5px -2px rgba(255,59,0,.8),-5px 2px rgba(255,176,0,.8);transform:translateY(2px) translateX(5px)}77%{text-shadow:-3px 0 rgba(255,59,0,.6),3px 0 rgba(255,176,0,.6);transform:skewX(3deg)}}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:0}}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes riseA{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes barjit{0%,78%,100%{opacity:0}79%{opacity:.5;transform:translateY(0)}81%{opacity:.25;transform:translateY(16vh)}83%{opacity:.5;transform:translateY(-10vh) scaleY(2.5)}85%{opacity:0}}

/* --- hover states -------------------------------------------------------
   The preview runtime implemented these with a style-hover="" attribute
   that only its React layer understood. As plain CSS they need real rules. */
header nav a:hover{color:#ffb000}
.fch-cta-solid:hover{background:#ff3b00;color:#0a0700}
.fch-cta-ghost:hover{background:rgba(255,176,0,.1);color:#ffb000}
/* .fch-field / .fch-submit / .fch-hp rules removed with the contact form. */

/* --- accessibility ------------------------------------------------------ */
:focus-visible{outline:2px solid #ffb000;outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-fx]{opacity:0!important}
}