/* Flatcallers · coming soon · merkstijl uit het brandbook (FC · Brand System). Eén scherm rond het logomark. */
@font-face { font-family: "Prompt"; font-style: italic; font-weight: 900; font-display: swap; src: url("/fonts/prompt-900-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, 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: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, 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: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/inter-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --fc-red: #FF0013; --fc-red-700: #B2000D; --fc-black: #101010; --fc-black-800: #1C1C1C;
  --fc-grey-700: #3A3A3A; --fc-grey-500: #7A7A7A; --fc-grey-300: #C9C9C9; --fc-grey-100: #EDEDED; --fc-white: #FFFFFF;
  --display: "Prompt", "NCL Neovibes", Poppins, system-ui, sans-serif;
  --text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1); --overshoot: cubic-bezier(.2, .9, .3, 1.2);
  --row: clamp(44px, 10.4vw, 150px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--text); color: var(--fc-white); background: var(--fc-red); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Stage: één vlak Imperial Red, contour van het logomark als tekening, zwarte vlammen in de hoek */
.stage { position: relative; min-height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; isolation: isolate; }
.outline { position: absolute; z-index: 0; left: -2%; top: -16%; width: 104%; height: auto; opacity: .9; pointer-events: none; }
.outline use { fill: none; stroke: var(--fc-white); stroke-width: .16; vector-effect: non-scaling-stroke; }
.outline path, .outline use { stroke-linejoin: round; }
.flames { position: absolute; z-index: 0; left: -12%; bottom: -6%; width: clamp(360px, 42vw, 620px); height: auto; pointer-events: none; }

/* Top */
.top { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: clamp(20px, 3vh, 40px) clamp(20px, 3vw, 48px) 0; }
.logomark { grid-column: 2; display: block; width: clamp(64px, 6vw, 84px); }
.logomark svg { display: block; width: 100%; height: auto; overflow: visible; }
.logomark .fc-f, .logomark .fc-c { fill: var(--fc-white); }
.logomark .fc-slash { fill: var(--fc-black); }
.langs { grid-column: 3; justify-self: end; display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.langs a { display: block; padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--fc-white); opacity: .8; }
.langs a[aria-current="page"] { background: var(--fc-black); opacity: 1; }
.langs a:hover { opacity: 1; }

/* Wordmark: de naam, drie keer, in echelon */
.hero { position: relative; z-index: 2; display: grid; align-content: center; justify-items: center; gap: clamp(24px, 4vh, 40px); padding: 8px 20px 24px; }
.wordmark { display: grid; gap: calc(var(--row) * -.09); width: 100%; max-width: 1240px; }
.row { margin: 0; font-family: var(--display); font-style: italic; font-weight: 900; font-size: var(--row); line-height: 1; letter-spacing: -.02em; color: var(--fc-black); white-space: nowrap; position: relative; justify-self: center; }
.row-1 { transform: translateX(calc(var(--row) * -.37)); }
.row-3 { transform: translateX(calc(var(--row) * .37)); }
.row-2 .outline-copy { position: absolute; left: calc(var(--row) * .2); top: calc(var(--row) * -.1); color: transparent; -webkit-text-stroke: 1.5px var(--fc-white); opacity: .75; pointer-events: none; }

/* Copy */
.line { margin: 0; text-align: center; font-size: clamp(15px, 1.4vw, 20px); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--fc-white); }

/* Footer */
.foot { position: relative; z-index: 2; padding: 20px clamp(20px, 3vw, 48px) 24px; text-align: center; font-size: 11px; line-height: 1.6; color: var(--fc-white); }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  :root { --row: 50px; }
  .outline { left: -46%; top: 4%; width: 195%; }
  .outline use { stroke-width: .12; }
  .flames { left: -34%; bottom: -3%; width: 92vw; }
  .top { grid-template-columns: 1fr auto; }
  .logomark { grid-column: 1; justify-self: center; width: 56px; margin-left: 40px; }
  .langs { grid-column: 2; }
  .row-1 { transform: translateX(calc(var(--row) * -.26)); }
  .row-3 { transform: translateX(calc(var(--row) * .26)); }
  .row-2 .outline-copy { -webkit-text-stroke-width: 1px; opacity: .5; }
  .line { font-size: 13px; letter-spacing: .14em; }
}

/* Motion: enkel met JavaScript (html.js) en zonder prefers-reduced-motion. Anders staat alles stil in de eindpositie. */
@media (prefers-reduced-motion: no-preference) {
  .js .outline use { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 1.8s var(--ease-out) .15s both; }
  .js .row-1 { animation: row-left .6s var(--ease-out) .5s both; }
  .js .row-2 { animation: row-right .6s var(--ease-out) .62s both; }
  .js .row-3 { animation: row-left2 .6s var(--ease-out) .74s both; }
  .js .row-2 .outline-copy { animation: fade .5s ease-out 1.1s both; }
  .js .logomark .fc-f { animation: from-left .45s var(--ease-out) .3s both; }
  .js .logomark .fc-c { animation: from-right .45s var(--ease-out) .38s both; }
  .js .logomark .fc-slash { animation: slash-drop .5s var(--overshoot) .5s both, slash-pulse 8s ease-in-out 3s infinite; transform-box: fill-box; transform-origin: 50% 0; }
  .js .line { animation: rise .35s var(--ease-out) 1.15s both; }
  .js .langs, .js .foot { animation: fade .5s ease-out 1.2s both; }
  .js .flames { animation: fade .8s ease-out .9s both, flames-drift 20s ease-in-out 1.7s infinite alternate; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes row-left { from { opacity: 0; transform: translateX(calc(var(--row) * -.37 - 60px)); } to { opacity: 1; transform: translateX(calc(var(--row) * -.37)); } }
@keyframes row-right { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes row-left2 { from { opacity: 0; transform: translateX(calc(var(--row) * .37 - 60px)); } to { opacity: 1; transform: translateX(calc(var(--row) * .37)); } }
@keyframes flames-drift { from { translate: 0 0; } to { translate: 24px -8px; } }
@keyframes from-left { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes from-right { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes slash-drop { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
@keyframes slash-pulse { 0%, 3.5%, 100% { transform: none; } 1.7% { transform: scaleY(1.04); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } }