/* Freakopoly — marketing site.
 *
 * Palette and materials are the game's own (web/css/style.css): near-black
 * umber, firelight, warm clay, cardstock. Type is the four faces the game
 * already ships, so the page needs no CDN and looks like the product.
 */

@font-face { font-family:"Cinzel"; font-style:normal; font-weight:400 900; font-display:swap; src:url("../fonts/Cinzel.woff2") format("woff2"); }
@font-face { font-family:"EB Garamond"; font-style:normal; font-weight:400 700; font-display:swap; src:url("../fonts/EBGaramond.woff2") format("woff2"); }
@font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:300 700; font-display:swap; src:url("../fonts/SpaceGrotesk.woff2") format("woff2"); }
@font-face { font-family:"UnifrakturMaguntia"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/UnifrakturMaguntia.woff2") format("woff2"); }

:root {
  --bg-deep:#0b0504; --bg-room:#160906; --bg-warm:#24100a;
  --surface:#261412; --surface-hi:#2f1a16; --surface-lo:#1d0f0c;
  --ember:#ff7a45; --flame:#ffb066; --candle:#ffd9a0; --rose:#e0666f;
  --ink:#f2e2d3; --ink-soft:#c4a48e; --ink-dim:#a8897a;
  --edge:rgba(255,175,115,0.16);
  --paper:#f1e4cf; --paper-edge:#ddc7a3; --paper-ink:#3b2416; --paper-soft:#6b4a34;
  --glass:linear-gradient(165deg,rgba(58,28,20,0.5),rgba(28,13,10,0.62));
  --wrap:1240px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg-deep); color:var(--ink);
  font-family:"EB Garamond",Georgia,serif; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--flame); outline-offset:3px; }

/* ============================ shared bits ============================ */
.wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding:0 40px; }

.btn {
  font-family:"Space Grotesk",sans-serif; font-size:0.79rem; font-weight:500;
  letter-spacing:0.11em; text-transform:uppercase; text-decoration:none;
  padding:14px 27px; border-radius:11px; border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:10px;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary {
  color:#2a1109;
  background:linear-gradient(168deg,#ffcf8f,#ff9a4d 58%,#ef7a34);
  box-shadow:0 8px 22px rgba(255,122,69,0.32), inset 0 1px 0 rgba(255,255,255,0.45);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(255,122,69,0.42), inset 0 1px 0 rgba(255,255,255,0.45); }
.btn-ghost {
  color:var(--candle); background:rgba(255,255,255,0.03);
  box-shadow:inset 0 0 0 1px rgba(255,175,115,0.28);
}
.btn-ghost:hover { transform:translateY(-2px); box-shadow:inset 0 0 0 1px rgba(255,175,115,0.6); }
.btn .steam { width:15px; height:15px; fill:currentColor; flex:none; }
.btn-soon {
  font-family:"Space Grotesk",sans-serif; font-size:0.58rem; letter-spacing:0.16em;
  padding:3px 7px; border-radius:5px; background:rgba(0,0,0,0.22);
}

.eyebrow {
  font-family:"Space Grotesk",sans-serif; font-size:0.68rem;
  letter-spacing:0.28em; text-transform:uppercase; color:var(--ink-dim);
}
.sec-title {
  margin:0; font-family:"Cinzel",serif; font-weight:600;
  font-size:clamp(1.5rem,3vw,2.15rem); letter-spacing:0.08em;
  text-transform:uppercase; color:var(--candle);
}
.sec-lede { margin:14px 0 0; max-width:560px; font-size:1.06rem; line-height:1.68; color:var(--ink-soft); }
.sec-head { margin-bottom:56px; }
.sec-head.centred { text-align:center; }
.sec-head.centred .sec-lede { margin-left:auto; margin-right:auto; }

section { position:relative; }

/* ============================= age gate ============================= */
.gate {
  position:fixed; inset:0; z-index:500;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(7,4,3,0.82); backdrop-filter:blur(22px) saturate(1.1);
  -webkit-backdrop-filter:blur(22px) saturate(1.1);
}
.gate[hidden] { display:none; }
.gate-card {
  max-width:430px; width:100%; padding:38px 36px 32px; border-radius:18px;
  background:var(--glass); text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,0.7), inset 0 0 0 1px var(--edge);
}
.gate-mark {
  font-family:"Cinzel",serif; font-weight:700; font-size:1rem;
  letter-spacing:0.24em; text-transform:uppercase; color:var(--candle);
}
.gate-card h1 {
  margin:20px 0 0; font-family:"Cinzel",serif; font-weight:600;
  font-size:1.35rem; letter-spacing:0.05em; color:var(--ink);
}
.gate-card p { margin:14px 0 0; font-size:1rem; line-height:1.65; color:var(--ink-soft); }
.gate-actions { display:flex; gap:11px; justify-content:center; margin-top:26px; flex-wrap:wrap; }
.gate-fine {
  margin-top:20px; font-family:"Space Grotesk",sans-serif;
  font-size:0.66rem; letter-spacing:0.06em; color:var(--ink-dim); line-height:1.6;
}
body.gated { overflow:hidden; }
body.gated .site { filter:blur(9px); pointer-events:none; }

/* =============================== nav =============================== */
.nav {
  position:absolute; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; gap:24px;
  width:100%; max-width:var(--wrap); margin:0 auto; padding:30px 40px;
}
.nav-mark {
  font-family:"Cinzel",serif; font-weight:700; font-size:0.82rem;
  letter-spacing:0.24em; text-transform:uppercase; color:var(--candle);
  text-decoration:none;
}
.nav-links { margin-left:auto; display:flex; gap:28px; }
.nav-links a {
  font-family:"Space Grotesk",sans-serif; font-size:0.72rem;
  letter-spacing:0.13em; text-transform:uppercase;
  color:var(--ink-dim); text-decoration:none; transition:color 0.18s ease;
}
.nav-links a:hover { color:var(--candle); }

/* ========================== hero: the corner ==========================
   The board is not scaled to fit — it is drawn far larger than the frame
   and anchored by its START corner, so what lands on screen is one corner
   of a real board at full fidelity. No perspective, so nothing is
   foreshortened and every tile reads. */
.hero {
  position:relative; overflow:hidden;
  min-height:min(94vh,900px); display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--bg-deep),var(--bg-room) 46%,var(--bg-warm));
}
.hero-corner { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hero-corner .fbo {
  --bs:min(215vh,2100px);
  position:absolute; right:-3%; bottom:-7%;
  transform:rotate(-2.2deg); transform-origin:100% 100%;
}
/* the copy sits on the felt, so the felt gets a scrim to read against */
.hero-scrim {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg,rgba(10,5,4,0.93) 26%,rgba(12,6,5,0.72) 46%,transparent 68%),
    linear-gradient(0deg,rgba(10,5,4,0.6),transparent 40%);
}
.hero-inner {
  position:relative; z-index:2; flex:1;
  width:100%; max-width:var(--wrap); margin:0 auto; padding:120px 40px 70px;
  display:flex; flex-direction:column; justify-content:center;
}
.hero-copy { max-width:530px; }
.hero-title {
  margin:20px 0 0; font-family:"Cinzel",serif; font-weight:700;
  /* background-clip:text paints the gradient over the ELEMENT BOX and clips
     it to the glyphs, so a glyph past the box edge gets no fill and simply
     vanishes. max-content sizes the box to the glyph run, whatever the
     font metrics do. */
  width:max-content;
  font-size:clamp(2.1rem,5.4vw,4.4rem); line-height:0.95;
  letter-spacing:0.1em; text-indent:0.1em; text-transform:uppercase;
  background:linear-gradient(178deg,#fff2dc 8%,var(--candle) 42%,#d98b4a 96%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 0 26px rgba(255,130,60,0.34));
}
.hero-sub { margin:22px 0 0; max-width:460px; font-size:1.12rem; line-height:1.66; color:var(--ink-soft); }
.hero-cta { display:flex; gap:13px; margin-top:32px; align-items:center; flex-wrap:wrap; }
.hero-foot {
  margin-top:16px; font-family:"Space Grotesk",sans-serif;
  font-size:0.7rem; letter-spacing:0.06em; color:var(--ink-dim);
}

/* ============================== trailer ============================== */
.trailer { padding:110px 0; background:linear-gradient(180deg,var(--bg-warm),#180c09); }
.player {
  position:relative; border-radius:16px; overflow:hidden;
  aspect-ratio:16/9; background:linear-gradient(155deg,#2a1512,#150a08);
  box-shadow:0 30px 70px rgba(0,0,0,0.6), inset 0 0 0 1px var(--edge);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px;
}
.player-play {
  width:74px; height:74px; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(168deg,#ffcf8f,#ff9a4d 58%,#ef7a34);
  box-shadow:0 12px 34px rgba(255,122,69,0.4);
  display:flex; align-items:center; justify-content:center;
  transition:transform 0.16s ease;
}
.player-play:hover { transform:scale(1.06); }
.player-play svg { width:24px; height:24px; fill:#2a1109; margin-left:4px; }
.player-note {
  font-family:"Space Grotesk",sans-serif; font-size:0.68rem;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-dim);
}

/* ============================== the steps ============================== */
.steps-sec { padding:110px 0; background:#180c09; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:34px; }
.step-em {
  width:46px; height:46px; margin-bottom:18px;
  background-color:var(--flame); opacity:0.92;
  -webkit-mask-image:var(--emblem); mask-image:var(--emblem);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
/* declared here rather than inline on the element: a url() in a custom
   property resolves against THIS file, so ../assets/ is the correct root */
.step-em.is-go        { --emblem:url("../assets/corner-go.webp"); }
.step-em.is-gaze      { --emblem:url("../assets/prop-slow-gaze.webp"); }
.step-em.is-house     { --emblem:url("../assets/house.webp"); }
.step-em.is-honeymoon { --emblem:url("../assets/prop-honeymoon.webp"); }
.step h3 {
  margin:0 0 9px; font-family:"Cinzel",serif; font-weight:600;
  font-size:0.9rem; letter-spacing:0.11em; text-transform:uppercase; color:var(--ink);
}
.step p { margin:0; font-size:1rem; line-height:1.64; color:var(--ink-dim); }

/* ============================== the ladder ============================== */
.ladder-sec { padding:112px 0; background:linear-gradient(180deg,#180c09,#1d0e0a); }
.ladder-grid { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:64px; align-items:center; }
.ladder-lede h2 {
  margin:0; font-family:"EB Garamond",serif; font-weight:500;
  font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.08; letter-spacing:-0.01em; color:var(--ink);
}
.ladder-lede h2 em {
  display:block; font-style:italic; font-weight:400;
  background:linear-gradient(96deg,var(--candle),var(--rose) 88%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  width:max-content; max-width:100%;
}
.ladder-lede p { margin:24px 0 0; max-width:470px; font-size:1.08rem; line-height:1.72; color:var(--ink-soft); }

.deed {
  padding:24px 24px 20px; border-radius:13px;
  background:linear-gradient(168deg,var(--paper),#e6d6bd); color:var(--paper-ink);
  box-shadow:0 26px 60px rgba(0,0,0,0.6), inset 0 0 0 1px var(--paper-edge), inset 0 1px 0 rgba(255,255,255,0.7);
  transform:rotate(1.6deg);
}
.deed-head { border-bottom:1.5px solid var(--paper-edge); padding-bottom:12px; margin-bottom:13px; }
.deed-kicker {
  font-family:"Space Grotesk",sans-serif; font-size:0.58rem;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--paper-soft);
}
.deed-name { font-family:"Cinzel",serif; font-weight:700; font-size:1.1rem; letter-spacing:0.03em; margin-top:6px; }
.rungs { display:flex; flex-direction:column; gap:2px; }
.rung {
  display:grid; grid-template-columns:46px 1fr 46px; align-items:center; gap:10px;
  padding:6px 7px; border-radius:6px; border:0; width:100%;
  background:transparent; text-align:left; cursor:pointer; color:inherit;
  font-family:inherit; transition:background 0.14s ease;
}
.rung:hover { background:rgba(59,36,22,0.07); }
.rung[aria-selected="true"] { background:rgba(59,36,22,0.12); }
.rung .gems { display:flex; gap:2px; align-items:center; height:9px; }
.rung .gems i { width:7px; height:7px; border-radius:50%; background:radial-gradient(circle at 34% 30%,#ffd9a0,#b9772f); }
.rung .gems i.hotel { width:12px; border-radius:2px; background:radial-gradient(circle at 34% 30%,#e8909a,#a63d52); }
.rung .gems .base {
  font-family:"Space Grotesk",sans-serif; font-size:0.54rem;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--paper-soft);
}
.rung .bar { height:7px; border-radius:4px; background:rgba(59,36,22,0.13); overflow:hidden; }
.rung .bar i { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#d98b4a,#b03f52); transition:width 0.4s cubic-bezier(0.22,1,0.36,1); }
.rung .time { font-family:"Space Grotesk",sans-serif; font-size:0.68rem; text-align:right; color:var(--paper-soft); font-variant-numeric:tabular-nums; }
.deed-out { margin-top:14px; padding-top:13px; border-top:1.5px solid var(--paper-edge); min-height:82px; }
.deed-rent {
  display:flex; align-items:baseline; justify-content:space-between;
  font-family:"Space Grotesk",sans-serif; font-size:0.58rem;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--paper-soft);
}
.deed-rent b { font-size:1.05rem; letter-spacing:0.02em; color:var(--paper-ink); font-variant-numeric:tabular-nums; }
.deed-task { margin-top:10px; font-size:1rem; line-height:1.5; color:#4a2f1d; }
.deed-task.veiled { color:var(--paper-soft); font-style:italic; }

/* ============================== five rooms ============================== */
.rooms-sec {
  padding:112px 0 120px;
  background:linear-gradient(180deg,var(--room-bg,#1d0e0a),var(--room-bg2,#140a08));
  transition:background 0.6s ease;
}
.rooms-board { display:flex; justify-content:center; margin:0 0 32px; }
.rooms-board .fbo { --bs:min(62vh,540px); }
.rail { display:flex; gap:9px; flex-wrap:wrap; justify-content:center; }
.chip {
  display:flex; align-items:center; gap:10px;
  padding:9px 15px 9px 10px; border-radius:10px; border:0; cursor:pointer;
  background:rgba(255,255,255,0.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.09);
  color:var(--ink-dim); font-family:"Space Grotesk",sans-serif;
  font-size:0.72rem; letter-spacing:0.07em;
  transition:color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.chip .sw { width:17px; height:17px; border-radius:5px; flex:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.16); }
.chip:hover { color:var(--ink); }
.chip[aria-pressed="true"] { color:var(--ink); background:rgba(255,255,255,0.07); box-shadow:inset 0 0 0 1px var(--room-accent,var(--flame)); }
.room-desc {
  margin:22px auto 0; max-width:440px; text-align:center; min-height:1.7em;
  font-size:1.04rem; color:var(--ink-soft);
}

/* ============================== features ============================== */
.features-sec { padding:110px 0; background:#140a08; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feature {
  padding:28px 26px 26px; border-radius:14px; background:var(--glass);
  box-shadow:inset 0 0 0 1px var(--edge), 0 14px 34px rgba(0,0,0,0.35);
}
.feature h3 {
  margin:0 0 10px; font-family:"Cinzel",serif; font-weight:600;
  font-size:0.86rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--candle);
}
.feature p { margin:0; font-size:1rem; line-height:1.66; color:var(--ink-dim); }

/* ============================== screenshots ============================== */
.shots-sec { padding:110px 0; background:linear-gradient(180deg,#140a08,#1a0d09); }
.shots { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.shot {
  aspect-ratio:16/10; border-radius:12px;
  background:linear-gradient(155deg,#2a1512,#160b08);
  box-shadow:inset 0 0 0 1px var(--edge);
  display:flex; align-items:center; justify-content:center;
  font-family:"Space Grotesk",sans-serif; font-size:0.64rem;
  letter-spacing:0.16em; text-transform:uppercase; color:#6c5747;
}
.shot.wide { grid-column:span 2; aspect-ratio:32/10; }

/* ============================== trust ============================== */
.trust-sec { padding:112px 0; background:#1a0d09; }
.trust { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.trust-card { padding:30px 28px; border-radius:14px; background:var(--glass); box-shadow:inset 0 0 0 1px var(--edge); }
.trust-card h3 {
  margin:0 0 11px; font-family:"Cinzel",serif; font-weight:600;
  font-size:0.9rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--candle);
}
.trust-card p { margin:0; font-size:1.02rem; line-height:1.68; color:var(--ink-dim); }

/* ============================== faq ============================== */
.faq-sec { padding:110px 0; background:linear-gradient(180deg,#1a0d09,#0f0705); }
.faq { max-width:820px; margin:0 auto; border-top:1px solid var(--edge); }
.faq details { border-bottom:1px solid var(--edge); }
.faq summary {
  list-style:none; cursor:pointer; padding:22px 40px 22px 0; position:relative;
  font-family:"Cinzel",serif; font-size:1rem; font-weight:600;
  letter-spacing:0.03em; color:var(--ink);
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:"Space Grotesk",sans-serif; font-size:1.2rem; color:var(--flame);
  transition:transform 0.2s ease;
}
.faq details[open] summary::after { content:"\2212"; }
.faq summary:hover { color:var(--candle); }
.faq-body { padding:0 40px 24px 0; margin:0; font-size:1.04rem; line-height:1.72; color:var(--ink-soft); }

/* ============================== footer ============================== */
.foot { padding:70px 0 60px; background:#0b0504; }
.foot-inner { display:flex; gap:30px; align-items:flex-start; flex-wrap:wrap; }
.foot-mark { font-family:"Cinzel",serif; font-weight:700; font-size:0.85rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--candle); }
.foot-note { margin:12px 0 0; max-width:390px; font-size:0.95rem; line-height:1.66; color:var(--ink-dim); }
.foot-links { margin-left:auto; display:flex; gap:40px; flex-wrap:wrap; }
.foot-col h4 {
  margin:0 0 12px; font-family:"Space Grotesk",sans-serif; font-size:0.6rem;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-dim);
}
.foot-col a {
  display:block; margin-bottom:9px; font-size:0.98rem;
  color:var(--ink-soft); text-decoration:none; transition:color 0.18s ease;
}
.foot-col a:hover { color:var(--candle); }
.foot-legal {
  margin-top:52px; padding-top:26px; border-top:1px solid var(--edge);
  font-family:"Space Grotesk",sans-serif; font-size:0.66rem;
  letter-spacing:0.06em; color:#6c5747; line-height:1.8;
}

/* ============================== reveal ============================== */
.reveal { opacity:0; transform:translateY(18px); transition:opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.reveal.in { opacity:1; transform:none; }

/* ============================== responsive ============================== */
@media (max-width:1080px) {
  .ladder-grid { grid-template-columns:1fr; gap:44px; }
  .deed { max-width:380px; transform:none; }
  .steps { grid-template-columns:repeat(2,1fr); }
  .features, .trust { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px) {
  .wrap { padding:0 22px; }
  .nav { padding:22px; }
  .nav-links { display:none; }
  .hero-inner { padding:96px 22px 60px; }
  /* the crop does the work at every width — just less board on a phone, so
     the corner still shows three or four whole tiles rather than a dozen */
  .hero-corner .fbo { --bs:min(380vw,1500px); right:-10%; bottom:-5%; }
  .hero-copy { max-width:none; }
  .steps, .features, .trust, .shots { grid-template-columns:1fr; }
  .shot.wide { grid-column:span 1; aspect-ratio:16/10; }
  .rooms-board .fbo { --bs:min(88vw,420px); }
  .trailer, .steps-sec, .ladder-sec, .rooms-sec, .features-sec, .shots-sec, .trust-sec, .faq-sec { padding:74px 0; }
  .sec-head { margin-bottom:38px; }
  .foot-links { margin-left:0; gap:30px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  * { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}