/* ============================================================================
   CROAK LANDING PAGES — shared stylesheet
   Ported from the Croak design system (Kickstarter + Newsletter Vercel pages,
   T-0298). Enqueued by both template-parts/croak-kickstarter.php and
   template-parts/croak-newsletter.php. Layout/CSS here is intentionally NOT
   ACF-editable (see the task brief) — only copy strings and a few toggles are.

   Ported verbatim: tokens/colors.css, tokens/typography.css, tokens/spacing.css,
   tokens/effects.css, fonts/fonts.css, components/forms/Input/Input.css,
   components/forms/EmailCaptureForm/EmailCaptureForm.css,
   components/media/Chip/Chip.css from the source design system, PLUS the two
   pages' own inline <style> blocks (the actual production overrides — the
   pages never used the design system's PrimaryButton ornate/ SecondaryButton /
   VideoBlock / Hero / QuickFactsChips / motion.css component classes; those
   referenced image assets (button-default.png, steam.svg, ...) that never
   existed anywhere in the export and 404'd even on the live Vercel pages, so
   they are intentionally dropped here rather than carried over as dead code.
   Zero visual change from this trim — flag if that call is wrong.
   ============================================================================ */

/* ---- Color tokens ---- */
:root {
  --croak-mint:        #beebe0;
  --croak-mint-lift:   #c1eae0;
  --croak-plum:        #923e6e;
  --croak-pink:        #cb74a6;
  --croak-plum-deep:   #7f2d5e;
  --croak-gold:        #fab423;
  --croak-grad-a:      #f4b8ba;
  --croak-grad-b:      #f6e096;
  --croak-ink:         #000000;
  --croak-white:       #ffffff;
  --croak-swamp:       #1a0f18;
  --croak-swamp-2:     #2a1626;
  --croak-swamp-line:  #4a2b40;
  --croak-input-fill:      rgba(0,0,0,0.23);
  --croak-input-fill-dark: rgba(255,255,255,0.10);
  --croak-error:  #c0392b;
  --croak-ok:     #2e8b6f;
  --surface-page:        var(--croak-mint);
  --surface-page-lift:   var(--croak-mint-lift);
  --surface-stage-dark:  var(--croak-swamp);
  --surface-card:        rgba(255,255,255,.62);
  --text-heading:        var(--croak-plum);
  --text-body:           #3a2532;
  --text-muted:          #6a5260;
  --text-on-dark:        #e9dbe4;
  --accent-sparkle:      var(--croak-gold);
  --border-hairline:     rgba(127,45,94,.18);

  /* ---- Typography tokens ---- */
  --croak-display: "FairyTaleJF", Georgia, "Times New Roman", serif;
  --croak-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --croak-ingame:  "Germania One", "FairyTaleJF", serif;
  --croak-h1-lg:   68px;
  --croak-h1-md:   55px;
  --croak-h1-sm:   40px;
  --croak-story-lg: 42px;
  --croak-story-md: 30px;
  --croak-story-sm: 23px;
  --croak-btn-label-lg: 28px;
  --croak-btn-label-sm: 22px;
  --croak-fs-base:  15px;
  --croak-fs-micro: 13px;
  --croak-fs-legal: 12px;
  --croak-lh-body:  1.55;
  --font-display: var(--croak-display);
  --font-body:    var(--croak-body);

  /* ---- Spacing / radius tokens ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --croak-radius-input: 4px;
  --croak-radius-media: 10px;
  --croak-radius-card:  14px;
  --croak-radius-chip:  24px;

  /* ---- Effects tokens ---- */
  --croak-shadow-btn:   0 3px 0 var(--croak-plum-deep), 0 5px 12px rgba(40,10,30,0.25);
  --croak-shadow-float: 0 6px 20px rgba(30,10,25,0.28);
  --croak-btn-aspect: 360 / 133;
  --croak-btn-w:      223px;
}

/* ---- Self-hosted fonts (Croak display + in-game accent face) ---- */
@font-face {
  font-family: "FairyTaleJF";
  src: url("../assets/croak/fonts/FairyTaleJF.woff2") format("woff2"),
       url("../assets/croak/fonts/FairyTaleJF.woff")  format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family:"Germania One";
  src:url('../assets/croak/fonts/GermaniaOne-Regular.woff2') format('woff2'),
      url('../assets/croak/fonts/GermaniaOne-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ---- Base input (component library Input.css, verbatim box model — the
   earlier "trimmed" pass here dropped width/height/padding/radius/font
   along with the unused ornate button vars, which is what actually made the
   email field render at browser UA defaults; restored 1:1 from the source
   design system's Input.css, T-0298 form-parity fix) ---- */
.croak-input{
  width:100%; height:48px; padding:0 14px; border:0;
  border-radius:var(--croak-radius-input); background:var(--croak-input-fill);
  color:var(--croak-white); font-family:var(--croak-body); font-size:16px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.croak-input::placeholder{ color:rgba(255,255,255,.85); }
.croak-input:focus-visible{ outline:3px solid var(--croak-gold); outline-offset:2px; }
.croak-input[aria-invalid="true"]{ outline:3px solid var(--croak-error); outline-offset:2px; }
.croak-input.on-dark{ background:var(--croak-input-fill-dark); }

/* ---- Email capture card (component library, EmailCaptureForm.css) ----
   T-0298 round 4 (08-03): restored the whole block verbatim from the source design
   system, not just the flagged properties. background/border/max-width are inert
   here since both templates set them inline on the form (brand overrides) - ported
   for 1:1 source fidelity anyway. The source's on-dark variant is not ported: no
   template ever applies .on-dark to the capture card. Flag if that call is wrong. */
.croak-capture{
  background:var(--surface-card); border:1px solid var(--border-hairline);
  border-radius:var(--croak-radius-card); padding:18px; max-width:440px;
}
.croak-capture__incentive{ font-size:14px; color:#3a2532; margin:0 0 12px; text-align:center; }
.croak-capture__incentive b{ color:var(--croak-plum-deep); }
.croak-capture__row{ display:flex; flex-direction:column; gap:10px; }
.croak-capture label.f{ font-size:13px; font-weight:700; color:#3a2532; }
.croak-capture__msg{ font-size:13px; margin:0; min-height:1.1em; color:var(--croak-error); }
.croak-capture__msg.is-ok{ color:var(--croak-ok); }
.croak-capture__msg:empty{ display:none; }
.croak-consent{ font-size:12px; color:#5a4350; margin:12px 0 0; display:flex; gap:9px; align-items:flex-start; }
.croak-consent input{ margin-top:2px; width:16px; height:16px; flex:0 0 auto; accent-color:var(--croak-plum-deep); }
.croak-consent a{ color:var(--croak-plum); font-weight:600; }

/* ---- Chip primitive (component library) ---- */
.croak-chip{
  background:rgba(255,255,255,.78);color:var(--croak-plum-deep);
  border:1.5px solid rgba(146,62,110,.4);font-size:14px;font-weight:700;
  padding:8px 16px;letter-spacing:.01em;line-height:1.1;
  box-shadow:0 1px 2px rgba(127,45,94,.1);
}
.croak-chip::before{
  content:"";display:inline-block;width:5px;height:5px;background:var(--croak-gold);
  transform:rotate(45deg);margin-right:8px;vertical-align:middle;border-radius:1px;
}
.croak-chip--gold{ background:var(--croak-gold); color:#3a2200; }

/* ============================================================================
   Page-level styling — ported verbatim from both pages' own inline <style>
   blocks (croak-landing + croak-newsletter). Shared here since both templates
   render the same "storybook stage" scene: drifting clouds, frog perch,
   hero capture card, video block, castle footer, sticky mobile CTA. The
   newsletter-only extras (feast-menu bullets, screenshot carousel, Steam
   widget) are namespaced under their own selectors below and simply never
   match on the kickstarter page.
   ============================================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.croak-lp{font-family:var(--croak-body);color:#2a1a24;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.croak-lp img{max-width:100%;display:block}
.croak-lp a{color:var(--croak-plum);text-decoration:none}
.croak-lp a:hover{color:var(--croak-gold)}

@keyframes croak-drift{from{transform:translateX(-40vw)}to{transform:translateX(120vw)}}
@keyframes croak-glow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes croak-rvup{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.croak-lp .rv{opacity:0}
.croak-lp .rv.is-in{animation:croak-rvup .6s cubic-bezier(.22,.61,.36,1) both}
.croak-lp .frog-sprite{background-repeat:no-repeat;image-rendering:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.croak-lp p{text-wrap:pretty}

.croak-lp .croak-input.brand-light{background:rgba(255,255,255,.78);color:#3a2532;border:1.5px solid rgba(127,45,94,.28);box-shadow:inset 0 1px 2px rgba(127,45,94,.08)}
.croak-lp .croak-input.brand-light::placeholder{color:#a98ba0}
.croak-lp .croak-input.brand-light:focus-visible{outline:none;border-color:var(--croak-gold);box-shadow:0 0 0 3px rgba(250,180,35,.35)}
.croak-lp .croak-input.brand-dark{background:rgba(255,255,255,.09);color:#fff;border:1.5px solid var(--croak-swamp-line)}
.croak-lp .croak-input.brand-dark::placeholder{color:rgba(255,255,255,.5)}
.croak-lp .croak-input.brand-dark:focus-visible{outline:none;border-color:var(--croak-gold);box-shadow:0 0 0 3px rgba(250,180,35,.3)}

.croak-lp .croak-btn--block{font-size:clamp(23px,5.2vw,29px) !important;min-height:60px !important;padding:15px 26px 17px !important;letter-spacing:.015em;border-width:2.5px !important;box-shadow:0 4px 0 var(--croak-plum-deep), 0 8px 16px rgba(40,10,30,.22) !important}
.croak-lp .croak-btn--block:active{transform:translateY(3px);box-shadow:0 1px 0 var(--croak-plum-deep), 0 4px 10px rgba(40,10,30,.22) !important}
.croak-lp .croak-btn{-webkit-appearance:none;appearance:none;cursor:pointer;font-family:var(--croak-display);color:#fff}
.croak-lp .croak-btn:focus-visible{outline:3px solid var(--croak-gold);outline-offset:3px}
.croak-lp .croak-btn:disabled{opacity:.65;cursor:not-allowed}
.croak-lp .btn-feast{background:url("../assets/croak/img/btn-feast-default.png") center/100% 100% no-repeat !important;border:0 !important;box-shadow:none !important;aspect-ratio:360/100;width:100%;max-width:360px;min-height:0 !important;margin:2px auto 0;padding:0 !important;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--croak-display);-webkit-text-stroke:.75px #000;text-shadow:0 2px 4px rgba(40,10,25,.4);line-height:1;transition:transform 90ms ease}
.croak-lp .btn-feast:hover{background-image:url("../assets/croak/img/btn-feast-hover.png") !important}
.croak-lp .btn-feast:active{transform:translateY(2px)}
.croak-lp .btn-feast:focus-visible{outline:3px solid var(--croak-gold);outline-offset:3px}

.croak-lp .foot-social a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:9px;color:#f6e8d3;transition:color .15s ease,background .15s ease}
.croak-lp .foot-social a:hover{color:#fcd98a;background:rgba(255,255,255,.1)}
.croak-lp .foot-social svg{width:20px;height:20px;display:block;fill:currentColor}
.croak-lp .foot-wrap{position:relative;max-width:820px;margin:0 auto}
.croak-lp .foot-social{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;gap:2px}
@media (max-width:760px){ .croak-lp .foot-social{position:static;transform:none;justify-content:center;margin-top:10px} }

.croak-lp .hero-social{display:flex;gap:10px;justify-content:center;margin-top:16px}
.croak-lp .hero-social a{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:12px;color:var(--croak-plum);transition:color .15s ease,transform .15s ease}
.croak-lp .hero-social a:hover{color:var(--croak-gold);transform:translateY(-2px)}
.croak-lp .hero-social a:focus-visible{outline:3px solid var(--croak-gold);outline-offset:2px}
.croak-lp .hero-social svg{width:30px;height:30px;display:block;fill:currentColor}

.croak-lp .croak-hp{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.croak-lp .croak-capture__row input[type="hidden"]{position:absolute}
.croak-lp .ml-recaptcha-wrap{margin:6px auto 2px;display:flex;justify-content:center;transform-origin:center}
@media (max-width:360px){ .croak-lp .ml-recaptcha-wrap{transform:scale(.87)} }

/* FairyTaleJF ships a single weight: headings' default 700 triggers synthetic
   bold, which smears the strokes. Pin display text to 400, use a minimal
   same-color hairline (just enough to close the lowercase 'p' slit). */
.croak-lp #stage h1,.croak-lp #stage h2,.croak-lp #stage h3,.croak-lp .croak-story{font-weight:400;-webkit-text-stroke:0.25px currentColor;letter-spacing:.012em}
.croak-lp .croak-story{font-family:var(--croak-display)}

@media (max-width:600px){
  .croak-lp .hero-social{flex-wrap:wrap;gap:8px}
  .croak-lp .foot-social{flex-wrap:wrap;justify-content:center}
}
@media (max-width:430px){
  .croak-lp .hero-social a{width:46px;height:46px}
  .croak-lp .hero-social svg{width:27px;height:27px}
}
@media (prefers-reduced-motion: reduce){
  .croak-lp [data-cloud],.croak-lp [data-bob],.croak-lp [data-sway],.croak-lp [data-glow]{animation:none !important}
  .croak-lp .rv{opacity:1 !important;transform:none !important;animation:none !important}
}
/* Frog easter egg is a desktop interaction. On narrow/touch screens he becomes
   a non-interactive background peek so he never overlaps the headline/CTA. */
@media (max-width: 760px){
  .croak-lp .frog-perch{display:none !important}
}

/* ---- Newsletter-only extras (never match on the kickstarter template) ---- */
.croak-lp .feast-menu{list-style:none;margin:0 auto;padding:0;display:flex;flex-direction:column;gap:14px;text-align:center;max-width:100%}
.croak-lp .feast-menu li{font-family:var(--croak-ingame);font-weight:400;font-size:clamp(16px,2.45vw,23px);line-height:1.4;color:#7F2D5E;max-width:100%;letter-spacing:.015em;white-space:nowrap}
.croak-lp .hook-nowrap{white-space:nowrap;margin-top:14px;margin-right:0;margin-bottom:4px}
.croak-lp .breakout{width:min(94vw,940px);margin-left:calc((100% - min(94vw,940px)) / 2)}
.croak-lp .feast-menu.breakout{margin-top:16px;margin-right:0;margin-bottom:0;max-width:none}
@media (max-width:620px){
  .croak-lp .breakout{width:auto;margin-left:0}
  .croak-lp .feast-menu li{white-space:normal;text-wrap:pretty}
  .croak-lp .hook-nowrap{white-space:normal}
}
.croak-lp .feast-menu li::before{content:"";display:inline-block;width:10px;height:10px;background:var(--croak-gold);transform:rotate(45deg);border-radius:1px;margin-right:11px;vertical-align:middle;box-shadow:0 0 6px rgba(250,180,35,.6)}

.croak-lp .shots-track{display:flex;transition:transform .42s cubic-bezier(.22,.9,.3,1)}
.croak-lp .shots-track>li{list-style:none;flex:0 0 100%;min-width:100%}
.croak-lp .shot-dot{width:44px;height:44px;display:grid;place-items:center;background:none;border:0;cursor:pointer;padding:0}
.croak-lp .shot-dot span{width:11px;height:11px;background:var(--croak-plum);opacity:.34;transform:rotate(45deg);border-radius:1px;display:block;transition:opacity .2s,background .2s}
.croak-lp .shot-dot[aria-current="true"] span{opacity:1;background:var(--croak-gold)}
.croak-lp .shot-arrow{width:52px;height:52px;min-width:52px;border-radius:50%;border:2px solid var(--croak-gold);background:var(--croak-plum-deep);color:#ffeec4;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:0;transition:background .18s,transform .18s}
.croak-lp .shot-arrow svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.croak-lp .shot-arrow:hover{background:var(--croak-plum);transform:translateY(-1px)}
.croak-lp .shot-arrow:focus-visible{outline:3px solid var(--croak-gold);outline-offset:2px}
.croak-lp .shot-count{font-family:var(--croak-display);color:var(--croak-plum-deep);font-size:19px;min-width:5.5ch;letter-spacing:.04em}
.croak-lp .shot-dots{flex-wrap:wrap;justify-content:center;max-width:100%}