/* YARD — playyard.gg
Direction: the name as a monument (taste-skill seed 1044916953), brand palette and type kept. */
@font-face { font-family: "Anton"; src: url("../assets/fonts/anton-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* Montserrat is the brand's primary face (Cancel brand book p.13) taste-skill-ignore */
@font-face { font-family: "Montserrat"; src: url("../assets/fonts/montserrat-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Kufi Arabic"; src: url("../assets/fonts/noto-kufi-arabic.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }
:root {
/* brand colours (Cancel brand book, rendered values) */
--bg: #000000; /* pure black, by request */
--surface: #161616; /* one tone step up */
--surface-2: #232323;
--ink: #f4f3f1; /* logotype white */
--muted: #bfb8a3; /* Tactical Gray family, lifted for reading on black */
--accent: #e0be85; /* THE YARD gold */
--accent-ink: #171717;
--paper: #d2ced0; /* Silver Bullet, footer ground */
--font-display: "Anton", "Noto Kufi Arabic", "Arial Narrow", sans-serif;
--font-text: "Montserrat", "Noto Kufi Arabic", system-ui, sans-serif;
/* five sizes */
--step-small: 0.9375rem; /* 15px */
--step-body: clamp(1.0625rem, 1rem + 0.15vw, 1.125rem); /* 17–18px */
--step-lead: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem); /* 20–24px */
--step-head: clamp(2.75rem, 1.4rem + 5vw, 6rem); /* 44–96px */
--step-display: min(21vw, 27svh); /* the monument, two lines */
--step-word: min(28vw, 46svh); /* the one-word button */
--margin: clamp(1.25rem, 2.2vw, 2rem);
--gutter: clamp(1rem, 2vw, 2rem);
--section: clamp(7.5rem, 13vw, 13rem);
--radius: 0px;
--chamfer: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
--chamfer-lg: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
--ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
--t-press: 140ms;
--t-hover: 180ms;
--t-ui: 240ms;
--t-reveal: 800ms;
--stagger-line: 90ms;
}
/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); overflow-x: clip; }
body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: var(--step-body); line-height: 1.55; font-kerning: normal; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; background: var(--surface); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:target, section[id] { scroll-margin-top: 5.5rem; }
html { scroll-padding-top: 5.5rem; }
p { max-width: 62ch; text-wrap: pretty; }
.nums { font-variant-numeric: tabular-nums; }
.small { font-size: var(--step-small); line-height: 1.5; }
.wrap { padding-inline: var(--margin); }
h1, h2 { font-family: var(--font-display); font-weight: 400; text-wrap: balance; }
.head { font-size: var(--step-head); line-height: 1.04; letter-spacing: -0.01em; text-transform: uppercase; }
/* Arabic: no tracking, no caps, roomier leading */
:root[lang="ar"] body { line-height: 1.75; }
:root[lang="ar"] .head,
:root[lang="ar"] .cta__word,
:root[lang="ar"] .duel__status { letter-spacing: 0; line-height: 1.3; font-weight: 800; }
[lang="ar"] { letter-spacing: 0; }
.skip { position: absolute; inset-inline-start: var(--margin); top: 1rem; clip-path: inset(50%); z-index: 50; background: var(--accent); color: var(--accent-ink); padding: 0.6rem 1rem; text-decoration: none; }
.skip:focus { clip-path: none; }
/* ---------- controls ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.6rem; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: var(--step-body); text-decoration: none; white-space: nowrap; border-radius: var(--radius); clip-path: var(--chamfer); transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.button:active { transform: scale(0.97); }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
.link-plain { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
.button:hover { background: var(--ink); color: var(--accent-ink); }
.link:hover { text-decoration-color: currentColor; }
.link-plain:hover { color: var(--accent); }
}
/* ---------- top bar: logo | numbered links on a sliding gold plate | language + wishlist ---------- */
.bar { --bar-gap: 0.75rem; position: fixed; top: var(--bar-gap); inset-inline: 0; z-index: 40; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 2rem; padding: 0.45rem var(--margin); transition: transform 520ms var(--ease-expo), padding 420ms var(--ease-expo), top 420ms var(--ease-expo); }
/* no box: a soft dark falloff behind the bar keeps it readable over any image */
.bar::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset-inline: -100vw; top: calc(-1 * var(--bar-gap) - 1px); height: calc(100% + var(--bar-gap) + 3.5rem); background: linear-gradient(to bottom, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.42) 55%, rgba(0,0,0,0) 100%); transition: opacity 300ms ease; } /* soft shadow taste-skill-ignore */
.bar.is-solid { top: 0.5rem; padding-block: 0.4rem; }
.bar.is-solid::before { background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0) 100%); } /* taste-skill-ignore */
/* scrolling down: both sides draw in and vanish into the centre mark; scrolling up: they open back out */
.bar__links, .bar__end { transition: clip-path 700ms var(--ease-expo), translate 700ms var(--ease-expo), opacity 500ms ease; clip-path: inset(-0.5rem -0.5rem -0.5rem -0.5rem); }
.bar.is-compact .bar__links { clip-path: inset(-0.5rem -0.5rem -0.5rem 100%); translate: 2rem 0; opacity: 0; pointer-events: none; }
.bar.is-compact .bar__end { clip-path: inset(-0.5rem 100% -0.5rem -0.5rem); translate: -2rem 0; opacity: 0; pointer-events: none; }
:root[dir="rtl"] .bar.is-compact .bar__links { clip-path: inset(-0.5rem 100% -0.5rem -0.5rem); translate: -2rem 0; }
:root[dir="rtl"] .bar.is-compact .bar__end { clip-path: inset(-0.5rem -0.5rem -0.5rem 100%); translate: 2rem 0; }
.bar.is-compact::before { opacity: 0.55; }
.bar__logo .mark { transition: scale 600ms var(--ease-expo), filter 400ms ease; }
.bar.is-compact .bar__logo .mark { scale: 1.12; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.8)); } /* keeps the mark legible on any image taste-skill-ignore */
.bar__logo { grid-column: 2; grid-row: 1; justify-self: center; display: flex; align-items: center; gap: 0.75rem; color: var(--ink); text-decoration: none; }
.mark { width: 2.2rem; flex: none; height: auto; overflow: visible; }
.mark path { fill: var(--ink); transform-box: fill-box; transition: transform 420ms var(--ease-out), fill var(--t-hover) ease; }
.mark__t { fill: var(--accent); transform-box: fill-box; transform-origin: 50% 0; transition: transform 420ms var(--ease-out); }
.bar__nav { display: contents; }
.bar__links { grid-column: 1; grid-row: 1; justify-self: start; position: relative; display: flex; align-items: center; gap: 0.35rem; padding: 0.25rem; margin-inline-start: -0.9rem; }
/* one gold plate slides to whichever link you point at, and rests as a bar under the current section */
.bar__plate { position: absolute; top: 0.3rem; bottom: 0.3rem; inset-inline-start: 0; width: var(--w, 0); translate: var(--x, 0) 0; background: var(--accent); clip-path: var(--chamfer); opacity: 0; scale: 1 0.08; transform-origin: 50% 100%; transition: translate 420ms var(--ease-expo), width 420ms var(--ease-expo), scale 320ms var(--ease-expo), opacity 200ms ease; pointer-events: none; }
:root[dir="rtl"] .bar__plate { inset-inline-start: auto; right: 0; translate: calc(var(--x, 0) * -1) 0; }
.bar__links.has-rest .bar__plate { opacity: 1; }
.bar__links.has-hot .bar__plate { opacity: 1; scale: 1 1; }
.bar__link { position: relative; z-index: 1; display: inline-flex; align-items: baseline; gap: 0.45rem; padding: 0.5rem 0.8rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: color 200ms ease; }
:root[lang="ar"] .bar__link { letter-spacing: 0; font-size: 0.8125rem; }
.bar__num { font-size: 0.625rem; font-weight: 600; color: var(--muted); transition: color 200ms ease; }
.bar__link.is-current, .bar__link[aria-current="page"] { color: var(--accent); }
.bar__link.is-hot, .bar__link.is-hot .bar__num { color: var(--accent-ink); }
.bar__end { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 0.9rem; }
.bar__action { display: inline-flex; align-items: center; min-height: 2.35rem; font-size: 0.8125rem; font-weight: 700; text-decoration: none; clip-path: var(--chamfer); background: var(--accent); color: var(--accent-ink); padding: 0 0.95rem; white-space: nowrap; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.bar__action .ico { width: 0.95rem; height: 0.95rem; margin-inline-end: 0.5rem; }
.bar__action { position: relative; overflow: clip; translate: var(--mgx, 0) var(--mgy, 0); transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out), translate 380ms var(--ease-expo); }
.bar__action::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 70%); translate: -120% 0; pointer-events: none; } /* shine taste-skill-ignore */
@media (hover: hover) and (pointer: fine) { .bar__action:hover::after { translate: 120% 0; transition: translate 700ms var(--ease-expo); } }
.bar__action:active, .bar__lang:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
.bar__action:hover { background: var(--ink); }
.bar__lang:hover { background: #262626; }
/* the two faces of the mark pull apart, the gold point drops */
.bar__logo:hover .mark__l { transform: translateX(-7%); }
.bar__logo:hover .mark__r { transform: translateX(7%); }
.bar__logo:hover .mark__t { transform: translateY(35%) scale(1.15); }
.bar__logo:hover .mark path { fill: var(--accent); }
}
.bar__logo:active .mark { transform: scale(0.94); }
@media (max-width: 1600px) { .bar__num { display: none; } }
@media (max-width: 1400px) { .bar__links .bar__link:last-of-type { display: none; } }
/* language: plain text, the current one bright, a rule before it */
.bar__lang { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.35rem; padding: 0 0.3rem 0 1rem; margin-inline-start: 0.3rem; box-shadow: inset 1px 0 0 rgba(240,240,240,0.28); font-family: var(--font-text); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); }
:root[dir="rtl"] .bar__lang { padding: 0 1rem 0 0.3rem; box-shadow: inset -1px 0 0 rgba(240,240,240,0.28); }
.bar__lang i { font-style: normal; font-weight: 400; color: var(--accent); }
.bar__lang-ar { letter-spacing: 0; font-family: "Noto Kufi Arabic", var(--font-text); font-weight: 700; }
.bar__lang span { transition: color 200ms ease; }
:root[lang="en"] .bar__lang-en, :root[lang="ar"] .bar__lang-ar { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .bar__lang:hover span { color: var(--ink); } }
/* menu: a gold outline with the cut corners */
.bar__menu { --c: 10px; position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 0.7rem; min-height: 2.35rem; padding: 0 0.9rem; font-size: 0.8125rem; font-weight: 600; color: var(--accent); transition: color 240ms ease; }
.bar__menu::before, .bar__menu::after { content: ""; position: absolute; pointer-events: none; }
.bar__menu::before { inset: 0; z-index: -2; background: var(--accent); clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); }
.bar__menu::after { inset: 1.5px; z-index: -1; background: #0b0b0b; clip-path: polygon(0 0, calc(100% - var(--c) + 0.62px) 0, 100% calc(var(--c) - 0.62px), 100% 100%, calc(var(--c) - 0.62px) 100%, 0 calc(100% - var(--c) + 0.62px)); transition: opacity 240ms ease, background-color 240ms ease; }
@media (hover: hover) and (pointer: fine) { .bar__menu:hover::after { background: #1c1810; } }
.bar.is-open .bar__menu { color: var(--accent-ink); }
.bar.is-open .bar__menu::after { opacity: 0; }
.bar__menu-icon { position: relative; width: 17px; height: 2px; background: currentColor; transition: background-color 200ms ease; }
.bar__menu-icon::before, .bar__menu-icon::after { content: ""; position: absolute; inset-inline: 0; height: 2px; background: currentColor; transition: transform 360ms var(--ease-expo), top 360ms var(--ease-expo); }
.bar__menu-icon::before { top: -5px; }
.bar__menu-icon::after { top: 5px; }
.bar.is-open .bar__menu-icon { background-color: transparent; }
.bar.is-open .bar__menu-icon::before { top: 0; transform: rotate(45deg); }
.bar.is-open .bar__menu-icon::after { top: 0; transform: rotate(-45deg); }
.bar.is-open { transform: none; }
/* the full menu: big numbered links, media pages and socials beside them */
.menu { position: fixed; inset: 0; z-index: -2; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 2rem var(--gutter); padding: 7.5rem max(var(--margin), calc((100vw - 82rem) / 2)) 3rem; overflow: clip auto; background: #000000; visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 680ms var(--ease-expo), visibility 0s 680ms; }
.bar.is-open .menu { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 680ms var(--ease-expo); }
.menu__main { display: grid; }
.menu__link { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.4rem 0; font-family: var(--font-display); font-size: clamp(2.6rem, 6.4vw, 6rem); line-height: 1.05; text-transform: uppercase; text-decoration: none; box-shadow: inset 0 -1px 0 #1f1f1f; transform: translateY(28px); opacity: 0; transition: transform 680ms var(--ease-expo), opacity 420ms ease, color var(--t-hover) ease, padding 420ms var(--ease-expo); transition-delay: calc(140ms + var(--n, 0) * 55ms); }
:root[lang="ar"] .menu__link { font-family: "Noto Kufi Arabic", var(--font-display); font-weight: 800; font-size: clamp(2.1rem, 4.8vw, 4.5rem); }
.menu__num { order: 2; font-family: var(--font-text); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--accent); }
.bar.is-open .menu__link { transform: none; opacity: 1; }
.menu__link.is-current, .menu__link[aria-current="page"] { color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .menu__link:hover { color: var(--accent); padding-inline-start: 1.25rem; } }
.menu__side { display: grid; gap: 1rem; align-content: center; opacity: 0; transform: translateY(16px); transition: opacity 420ms ease, transform 640ms var(--ease-expo); transition-delay: 380ms; }
.bar.is-open .menu__side { opacity: 1; transform: none; }
.menu__k { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
:root[lang="ar"] .menu__k { letter-spacing: 0; font-size: var(--step-small); }
.menu__media { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; }
.menu__media a { display: block; padding: 0.7rem 0; font-size: var(--step-lead); font-weight: 600; text-decoration: none; box-shadow: inset 0 -1px 0 #1f1f1f; transition: color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .menu__media a:hover { color: var(--accent); } }
.menu .bar__lang--menu { display: none; }
.menu__ghost { position: absolute; z-index: -1; inset-inline-end: -10vw; bottom: -12vh; width: min(60vw, 44rem); pointer-events: none; opacity: 0.045; }
.mark--ghost { width: 100%; }
.mark--ghost path, .mark--ghost .mark__t { fill: var(--ink); }
@media (max-width: 1180px) {
.bar { --bar-gap: 0.6rem; gap: 0.75rem; padding: 0.4rem var(--margin); }
.mark { width: 2rem; }
.bar__nav { display: none; }
.bar__end { display: contents; }
.bar__action { grid-column: 1; grid-row: 1; justify-self: start; }
.bar__end > .bar__lang { display: none; }
.menu .bar__lang--menu { display: inline-flex; justify-content: center; margin: 0.5rem 0 0; min-height: 3.25rem; padding: 0; box-shadow: inset 0 0 0 1px rgba(208,197,154,0.28); font-size: var(--step-body); }
.bar__menu { grid-column: 3; grid-row: 1; justify-self: end; }
.bar__action, .bar__menu { transition: clip-path 700ms var(--ease-expo), translate 700ms var(--ease-expo), opacity 500ms ease, background-color var(--t-hover) ease; }
.bar.is-compact .bar__action { clip-path: inset(-0.5rem -0.5rem -0.5rem 100%); translate: 2rem 0; opacity: 0; pointer-events: none; }
.bar.is-compact .bar__menu { clip-path: inset(-0.5rem 100% -0.5rem -0.5rem); translate: -2rem 0; opacity: 0; pointer-events: none; }
:root[dir="rtl"] .bar.is-compact .bar__action { clip-path: inset(-0.5rem 100% -0.5rem -0.5rem); translate: -2rem 0; }
:root[dir="rtl"] .bar.is-compact .bar__menu { clip-path: inset(-0.5rem -0.5rem -0.5rem 100%); translate: 2rem 0; }
.menu { grid-template-columns: 1fr; align-items: start; align-content: space-between; padding-top: 6rem; padding-bottom: 2rem; }
.menu__link { font-size: clamp(2.6rem, 11vw, 4.75rem); }
:root[lang="ar"] .menu__link { font-size: clamp(2.1rem, 9vw, 3.75rem); }
.menu__media { grid-template-columns: 1fr 1fr; column-gap: 1rem; margin-bottom: 0.5rem; }
.menu__media a { font-size: var(--step-body); }
}
@media (max-width: 400px) { .bar__menu-label { display: none; } .bar__menu { padding: 0 0.85rem; } .bar__action { padding: 0 0.8rem; font-size: 0.8125rem; } }
html.menu-open { overflow: hidden; }
/* ---------- hero: the face-off key art, everything centred in the open ground, details in the corners ---------- */
.hero { position: relative; height: 100svh; min-height: 42rem; overflow: clip; isolation: isolate; background: #000000; view-timeline-name: --hero; }
.hero__bg { position: absolute; inset: 0; z-index: -3; }
.hero__bg img, .hero__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; background: #0b0b0b; filter: saturate(1.02) contrast(1.06) brightness(0.9); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
radial-gradient(140% 100% at 50% 35%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.6) 85%, #000000 100%),
linear-gradient(to top, #000000 0%, rgba(0,0,0,0.9) 26%, rgba(0,0,0,0.5) 48%, rgba(0,0,0,0) 66%),
linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 16%); } /* the floor goes dark so the copy reads; faces stay lit taste-skill-ignore */
.hero__dust { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.hero__copy { position: absolute; z-index: 2; left: 50%; bottom: 7.25rem; translate: -50% 0; width: min(46rem, calc(100% - 2 * var(--margin))); display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__chip { display: inline-flex; align-items: center; gap: 0.7rem; margin: 0 0 1.4rem; padding: 0.5rem 0.9rem; box-shadow: inset 0 0 0 1px rgba(208,197,154,0.4); background: rgba(0,0,0,0.35); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); }
:root[lang="ar"] .hero__chip { letter-spacing: 0; font-size: 0.8125rem; }
.hero__chip-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .hero__chip-dot { animation: join-ping 2.2s var(--ease-out) infinite; } }
.hero__name { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; transform-origin: 50% 100%; }
.hero__logo { display: block; width: min(30vw, 46svh, 30rem); height: auto; overflow: visible; fill: var(--ink); filter: drop-shadow(0 10px 40px rgba(0,0,0,0.55)); } /* lifts the logotype off the image taste-skill-ignore */
.hero__logo .t-acc { fill: var(--accent); }
.hero__logo > * { transform-box: fill-box; transform-origin: 50% 100%; }
.hero__logo-ar { display: block; width: min(32vw, 48svh, 32rem); height: auto; fill: var(--ink); filter: drop-shadow(0 10px 40px rgba(0,0,0,0.55)); } /* taste-skill-ignore */
.hero__alt { font-family: "Noto Kufi Arabic", var(--font-text); font-size: 1rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.hero__alt[lang="en"] { font-family: var(--font-text); font-size: 0.75rem; letter-spacing: 0.3em; }
.hero__tag { margin: 1.25rem 0 0; font-family: var(--font-display); font-size: clamp(1.6rem, 1rem + 1.8vw, 2.6rem); line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; }
:root[lang="ar"] .hero__tag { font-family: "Noto Kufi Arabic", var(--font-display); font-weight: 800; letter-spacing: 0; line-height: 1.4; }
.hero__lead { margin: 0.9rem 0 0; font-size: var(--step-body); line-height: 1.55; color: var(--ink); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1.6rem; }
.hero .button--big { min-height: 3.4rem; padding: 0 1.5rem; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
:root[lang="ar"] .hero .button--big { letter-spacing: 0; font-size: var(--step-body); }
.button--ghost { background: rgba(0,0,0,0.35); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(240,240,240,0.55); clip-path: none; }
@media (hover: hover) and (pointer: fine) { .button--ghost:hover { background: var(--ink); color: var(--accent-ink); } }
.ico--sm { width: 1rem; height: 1rem; }
.button .ico--sm { margin-inline: 0.55rem 0; }
.button--ghost .ico--sm { margin-inline: 0 0.6rem; }
:root[dir="rtl"] .button .ico--sm:last-child { scale: -1 1; }
.hero__note { margin: 0.8rem 0 0; font-size: 0.6875rem; color: var(--muted); }
/* corners */
.hero__corner { position: absolute; z-index: 2; margin: 0; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; }
:root[lang="ar"] .hero__corner { letter-spacing: 0; font-size: 0.8125rem; }
.hero__corner--tl { inset-inline-start: var(--margin); top: 7rem; display: grid; gap: 0.3rem; }
.hero__corner--tl b { font-weight: 700; }
.hero__corner--tl span { color: var(--muted); }
.hero__corner--bl { inset-inline-start: var(--margin); bottom: 2rem; }
.hero__corner--br { inset-inline-end: var(--margin); bottom: 2rem; text-align: end; }
.hero__k { margin: 0 0 0.75rem; color: var(--muted); }
.hero__plats { margin: 0; display: flex; gap: 1.5rem; font-size: var(--step-small); letter-spacing: 0; text-transform: none; font-weight: 600; }
.hero__plats span { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__plats .ico { width: 1.35rem; height: 1.35rem; }
.hero__rate { margin: 0; display: inline-flex; align-items: center; gap: 0.85rem; text-align: start; letter-spacing: 0; text-transform: none; font-size: 0.75rem; line-height: 1.45; color: var(--ink); }
.hero__rate b { display: grid; place-items: center; min-width: 3.1rem; height: 3.1rem; padding: 0 0.4rem; box-shadow: inset 0 0 0 1.5px var(--ink); font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; }
.hero__enter { position: absolute; z-index: 2; left: 50%; bottom: 2rem; translate: -50% 0; display: inline-flex; align-items: center; gap: 0.9rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; }
:root[lang="ar"] .hero__enter { letter-spacing: 0; font-size: 0.8125rem; }
.hero__enter i { display: grid; place-items: center; width: 1.9rem; height: 2.6rem; box-shadow: inset 0 0 0 1px rgba(240,240,240,0.5); transition: box-shadow 240ms ease, background-color 240ms ease; }
.hero__enter i .ico { width: 0.9rem; height: 0.9rem; margin: 0; }
@media (prefers-reduced-motion: no-preference) { .hero__enter i .ico { animation: enter-bob 1.8s var(--ease-in-out) infinite; } }
@media (hover: hover) and (pointer: fine) { .hero__enter:hover { color: var(--accent); } .hero__enter:hover i { box-shadow: inset 0 0 0 1px var(--accent); } }
@keyframes enter-bob { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 3px; } }
/* section rail: dots down the edge on wide screens, the live one gold */
.rail { position: fixed; z-index: 30; inset-inline-end: 1.1rem; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.rail a { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; }
.rail i { width: 4px; height: 4px; border-radius: 50%; background: rgba(240,240,240,0.4); transition: background-color 240ms ease, scale 320ms var(--ease-expo); }
.rail a.is-on i { background: var(--accent); scale: 1.7; }
@media (hover: hover) and (pointer: fine) { .rail a:hover i { background: var(--ink); scale: 1.5; } }
.rail__label { order: 9; margin-top: 0.75rem; writing-mode: vertical-rl; font-size: 0.625rem; letter-spacing: 0.2em; color: var(--muted); }
.rail__label b { color: var(--accent); font-weight: 700; }
html.menu-open .rail { opacity: 0; }
@media (max-width: 1180px) { .rail { display: none; } }
.platforms { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; color: var(--muted); }
.platforms__item { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ink); font-weight: 600; }
.ico { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
.button .ico { margin-inline-end: 0.6rem; }
.button--big { min-height: 3.75rem; padding: 0 1.9rem; font-size: var(--step-lead); }
.button--dark { background: #1f1f1f; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .button--dark:hover { background: var(--ink); color: var(--accent-ink); } }
@media (max-height: 820px) and (min-width: 861px) { .hero__lead, .hero__note { display: none; } }
@media (max-height: 700px) and (min-width: 861px) { .hero__corner--tl, .hero__chip { display: none; } }
@media (max-width: 860px) {
/* phone: the skull-mask soldier fills the frame; the copy sits on the floor below him */
.hero { min-height: 100svh; height: auto; display: flex; flex-direction: column; justify-content: flex-end; padding: 50svh var(--margin) 1.5rem; }
.hero__bg { bottom: auto; height: 78svh; }
.hero__note { display: none; }
.hero__bg img, .hero__video { object-position: 12% 10%; }
.hero::before { background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30svh, rgba(0,0,0,0.75) 56svh, #000000 78svh), linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 14svh); } /* the face stays lit, the copy sits on black taste-skill-ignore */
.hero__copy { position: relative; left: auto; top: auto; translate: none; width: auto; }
.hero__chip { margin-bottom: 1.25rem; }
.hero__logo { width: 74vw; }
.hero__logo-ar { width: 78vw; }
.hero__tag { margin-top: 1.25rem; font-size: 1.6rem; }
.button--big, .hero .button--big { min-height: 3.25rem; padding: 0 1.2rem; font-size: 0.8125rem; }
.hero__corner--tl, .hero__enter, .hero__corner--br .hero__k { display: none; }
.hero__corner--bl, .hero__corner--br { position: relative; inset: auto; bottom: auto; }
.hero__corner--bl { margin-top: 2rem; display: flex; justify-content: center; }
.hero__corner--bl .hero__k { display: none; }
.hero__corner--br { margin-top: 1.25rem; display: flex; justify-content: center; text-align: start; }
}
/* ---------- intro: heading captions a panorama that opens to the whole screen ---------- */
.intro { padding-top: var(--section); }
.intro__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.intro__top .head { grid-column: 1 / span 8; }
.intro__captions { grid-column: 9 / span 4; display: flex; gap: 2rem; }
.intro__captions p { flex: 1; color: var(--muted); }
.opening { margin-top: 2.5rem; }
.opening__stage { position: relative; height: 100svh; overflow: clip; background: #000000; }
.opening__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: none; }
.opening__lit { opacity: 0; }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.opening { height: 170svh; view-timeline-name: --opening; }
.opening__stage { position: sticky; top: 0; animation: opening-window linear both; animation-timeline: --opening; animation-range: contain 0% contain 70%; }
.opening__img { animation: opening-settle linear both; animation-timeline: --opening; animation-range: contain 0% contain 70%; }
}
}
@keyframes opening-window { from { clip-path: inset(18% 26%); } to { clip-path: inset(0); } }
@keyframes opening-settle { from { transform: scale(1.18); } to { transform: none; } }
/* torch: on a fine pointer the night yard goes dark and the pointer carries the light */
@media (hover: hover) and (pointer: fine) {
.opening__stage.is-torch .opening__img { filter: brightness(0.32) saturate(0.7); transition: filter 400ms ease; }
.opening__stage.is-torch .opening__lit { opacity: 1; filter: brightness(1.25); -webkit-mask-image: radial-gradient(circle 22vmax at var(--tx, 50%) var(--ty, 50%), #000 0%, rgba(0,0,0,0.85) 35%, transparent 70%); mask-image: radial-gradient(circle 22vmax at var(--tx, 50%) var(--ty, 50%), #000 0%, rgba(0,0,0,0.85) 35%, transparent 70%); } /* a light mask, not a fill taste-skill-ignore */
}
@media (max-width: 760px) {
.intro__top { display: block; }
.intro__captions { flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.opening__stage { height: 72svh; }
.opening__stage img { object-position: 38% 50%; }
.opening { height: auto; }
.opening__stage { position: relative; animation: none; }
.opening__img { animation: none; }
}
/* ---------- rules: a held scene, four pillars ---------- */
.rules { margin-top: var(--section); }
.rules__stage { background: #000000; }
.rules__pics { display: none; }
.rules__list { list-style: none; margin: 0; padding: 0 var(--margin); display: grid; gap: 4rem; }
.rule__word { font-family: var(--font-display); font-weight: 400; font-size: min(10.5vw, 11rem); line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; }
.rule__word--gold { color: var(--accent); }
.rule__line { margin-top: 1rem; font-size: var(--step-lead); line-height: 1.38; max-width: 30ch; }
:root[lang="ar"] .rule__word { font-family: "Noto Kufi Arabic", var(--font-display); font-weight: 800; line-height: 1.3; letter-spacing: 0; }
/* live: words swap on a held stage while the pictures change behind them */
.rules.is-live .rules__stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: 0 var(--margin); align-items: center; }
.rules.is-live .rules__pics { display: block; position: relative; grid-column: 8 / span 5; grid-row: 1; height: 78svh; overflow: clip; clip-path: var(--chamfer-lg); }
.rules.is-live .rules__pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: none; }
.rules.is-live .rules__list { grid-column: 1 / span 7; grid-row: 1; position: relative; height: 78svh; padding: 0; display: block; }
.rules.is-live .rule { position: absolute; inset-inline: 0; bottom: 0; }
.rules.is-live .rule__word { font-size: min(9.4vw, 10rem); }
:root[dir="rtl"] .rules.is-live .rules__pics { grid-column: 1 / span 5; }
:root[dir="rtl"] .rules.is-live .rules__list { grid-column: 6 / span 7; }
@media (max-width: 767px) {
.rules__list { gap: 3rem; padding-block: 1rem; }
.rule__word { font-size: 14.5vw; }
.rule__line { font-size: var(--step-body); }
}
/* ---------- the duel (live) ---------- */
.duel { padding-top: var(--section); }
.duel__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.duel__head .head { grid-column: 1 / span 7; }
.duel__intro { grid-column: 9 / span 4; }
.duel__stage { position: relative; margin: 4rem 0 0; display: grid; grid-template-columns: 1fr minmax(22rem, 34rem) 1fr; background: #000000; min-height: 92svh; transition: background-color 90ms linear; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.duel__face { position: relative; overflow: clip; }
.duel__face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: filter 300ms ease, transform 600ms var(--ease-out); }
/* face-off: each operator fades toward the middle */
.duel__face--him { -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%); mask-image: linear-gradient(to right, #000 55%, transparent 100%); } /* face-off mask taste-skill-ignore */
.duel__face--you { -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%); mask-image: linear-gradient(to left, #000 55%, transparent 100%); } /* face-off mask taste-skill-ignore */
:root[dir="rtl"] .duel__face--him { -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%); mask-image: linear-gradient(to left, #000 55%, transparent 100%); } /* face-off mask taste-skill-ignore */
:root[dir="rtl"] .duel__face--you { -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%); mask-image: linear-gradient(to right, #000 55%, transparent 100%); } /* masks, not fills taste-skill-ignore */
.duel__face figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: 2.5rem 1.25rem 1rem; background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0)); font-weight: 600; } /* neutral scrim under a caption on a photo taste-skill-ignore */
/* the key art already has the two operators facing each other, so no flip */
.duel__center { position: relative; z-index: 1; align-self: center; margin-block: 3rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 3rem 2rem; gap: 1rem; background: rgba(48,48,48,0.78); clip-path: var(--chamfer-lg); transition: background-color 90ms linear, color 90ms linear; }
.duel__mark { width: 3.25rem; height: auto; fill: var(--ink); margin-bottom: 0.25rem; }
.duel__mark .mark__t { fill: var(--accent); }
.duel__status { font-family: var(--font-display); font-size: var(--step-head); line-height: 1.04; text-transform: uppercase; max-width: 12ch; text-wrap: balance; }
.duel__line { font-family: "Noto Kufi Arabic", var(--font-text); font-weight: 600; font-size: var(--step-lead); line-height: 1.6; color: var(--accent); max-width: 22ch; }
.duel__sub { color: var(--muted); max-width: 34ch; min-height: 3em; }
.duel__controls { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.duel__fire { clip-path: var(--chamfer); min-width: 12rem; min-height: 4.5rem; padding: 0 2rem; background: var(--ink); color: var(--bg); font-family: var(--font-display); font-size: var(--step-lead); letter-spacing: 0.02em; text-transform: uppercase; transition: transform var(--t-press) var(--ease-out); }
.duel__fire:active { transform: scale(0.96); }
.duel__choice { display: flex; gap: 0.75rem; }
.duel__pick { clip-path: var(--chamfer); min-width: 9rem; min-height: 4.5rem; padding: 0 1.75rem; font-family: var(--font-display); font-size: var(--step-lead); letter-spacing: 0.02em; text-transform: uppercase; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.duel__pick:active { transform: scale(0.96); }
.duel__pick--spare { background: var(--ink); color: var(--bg); }
.duel__pick--end { background: var(--accent); color: var(--accent-ink); }
@media (hover: hover) and (pointer: fine) {
.duel__pick--spare:hover { background: var(--accent); color: var(--accent-ink); }
.duel__pick--end:hover { background: var(--ink); color: var(--bg); }
}
.duel__after { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.5rem; }
.duel__best { color: var(--muted); min-height: 1.5em; }
.duel__controls [hidden] { display: none; }
/* states */
.duel[data-state="wait"] .duel__stage { background: #000000; cursor: crosshair; }
.duel[data-state="wait"] .duel__face img { filter: brightness(0.6); }
.duel[data-state="draw"] .duel__stage { background: #2a2418; cursor: crosshair; }
.duel[data-state="draw"] .duel__center { background: var(--accent); color: var(--accent-ink); }
.duel[data-state="draw"] .duel__mark { fill: var(--accent-ink); }
.duel[data-state="draw"] .duel__line,
.duel[data-state="draw"] .duel__sub { color: var(--accent-ink); }
.duel[data-state="draw"] .duel__fire { background: var(--accent-ink); color: var(--accent); }
.duel[data-state="win"] .duel__face--him img,
.duel[data-state="spare"] .duel__face--him img { filter: grayscale(1) brightness(0.55); }
.duel[data-state="lose"] .duel__face--you img,
.duel[data-state="early"] .duel__face--you img { filter: grayscale(1) brightness(0.55); }
.duel[data-state="end"] .duel__stage { background: #000; }
.duel[data-state="end"] .duel__face--him img { filter: brightness(0); }
.duel.is-blackout .duel__stage > * { opacity: 0; }
@media (max-width: 860px) {
.duel__head .head, .duel__intro { grid-column: 1 / -1; }
.duel__intro { margin-top: 1.25rem; }
.duel__stage { margin: 2.5rem 0 0; grid-template-columns: 1fr 1fr; grid-template-rows: 40svh auto; min-height: 0; }
.duel__center { grid-column: 1 / -1; grid-row: 2; margin: -3rem var(--margin) 2.5rem; padding: 2rem 1.25rem 2.25rem; min-height: 46svh; }
.duel__face--you { grid-column: 2; grid-row: 1; }
.duel__face figcaption { display: none; }
}
/* ---------- showcase: band of unequal panels ---------- */
.showcase { padding-top: var(--section); }
.showcase__title { padding-inline-start: calc(var(--margin) + (100vw - 2 * var(--margin)) / 12 * 2); margin-bottom: 4rem; }
.band { display: flex; height: 68svh; min-height: 26rem; background: #2b2b2b; }
.band__panel { position: relative; flex: var(--g) 1 0; min-width: 0; min-height: 0; overflow: clip; transition: flex-grow 500ms var(--ease-in-out); }
.band__panel img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; background: #2b2b2b; transition: transform 700ms var(--ease-soft); }
.band__title { position: absolute; top: 0; inset-inline-start: 0; padding: 1.5rem 3rem 3rem 1.5rem; font-family: var(--font-display); font-size: var(--step-lead); line-height: 1.1; text-transform: uppercase; background: radial-gradient(120% 120% at 0 0, rgba(0,0,0,0.6), rgba(0,0,0,0) 70%); } /* neutral corner scrim taste-skill-ignore */
:root[dir="rtl"] .band__title { background: radial-gradient(120% 120% at 100% 0, rgba(0,0,0,0.6), rgba(0,0,0,0) 70%); /* taste-skill-ignore */ padding: 1.5rem 1.5rem 3rem 3rem; }
.band__role { font-family: var(--font-text); font-size: var(--step-small); font-weight: 600; text-transform: none; color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
.band__panel:hover { flex-grow: 6; }
.band__panel:hover img { transform: scale(1.03); }
}
.showcase__caption { margin-top: 1.25rem; color: var(--muted); max-width: 60ch; }
@media (max-width: 760px) {
.showcase__title { padding-inline-start: var(--margin); margin-bottom: 2rem; }
.band { display: grid; height: 84svh; grid-template-columns: 64fr 36fr; grid-template-rows: 1fr 1fr; }
.band__panel:nth-child(3) { grid-column: 2; grid-row: 2; }
.band__panel:nth-child(4) { grid-column: 1; grid-row: 2; }
.band { grid-template-areas: none; }
.band__panel:nth-child(1) { grid-column: 1; grid-row: 1; }
.band__panel:nth-child(2) { grid-column: 2; grid-row: 1; }
.band__title { padding: 1rem 2rem 2rem 1rem; }
}
@media (max-width: 760px) {
/* second row 36/64: the third panel takes the wider slot */
.band { grid-template-columns: 64fr 36fr; }
.band__panel:nth-child(3) { grid-column: 2; }
}
/* ---------- inside the yard: media hub ---------- */
.media { padding-top: var(--section); }
.media__title { margin-bottom: 3rem; }
.media__hub { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gutter); align-items: start; }
.media__view { position: relative; aspect-ratio: 16 / 10; background: #0d0d0d; overflow: clip; clip-path: var(--chamfer-lg); }
.media__view img { width: 100%; height: 100%; object-fit: contain; background: none; transition: opacity 260ms ease, transform 900ms var(--ease-expo); }
.media__view.is-swapping img { opacity: 0; transform: scale(1.03); }
.media__caption { position: absolute; inset-inline: 0; bottom: 0; display: flex; gap: 1rem; align-items: baseline; padding: 3rem 1.5rem 1.25rem; background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0)); } /* neutral scrim taste-skill-ignore */
.media__tagline { color: var(--accent); font-weight: 700; }
.media__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; max-height: calc((100vw - 2 * var(--margin)) * 8 / 12 * 10 / 16); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3f3f3f transparent; }
.media__item { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: center; width: 100%; padding: 0.5rem; text-align: start; background: var(--surface); clip-path: var(--chamfer); transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.media__item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #0d0d0d; filter: saturate(0.6) brightness(0.8); transition: filter var(--t-ui) ease; }
.media__text { display: flex; flex-direction: column; gap: 0.15rem; }
.media__name { font-weight: 600; }
.media__type { color: var(--muted); }
.media__item:active { transform: scale(0.98); }
.media__item.is-active { background: var(--accent); color: var(--accent-ink); }
.media__item.is-active .media__type { color: var(--accent-ink); }
.media__item.is-active img { filter: none; }
@media (hover: hover) and (pointer: fine) {
.media__item:not(.is-active):hover { background: var(--surface-2); }
.media__item:hover img { filter: none; }
}
@media (max-width: 860px) {
.media__hub { grid-template-columns: 1fr; }
.media__view { aspect-ratio: 4 / 3; margin-inline: calc(var(--margin) * -1); clip-path: none; }
.media__list { display: grid; grid-template-columns: 1fr 1fr; max-height: none; overflow: visible; }
.media__item { grid-template-columns: 1fr; gap: 0.5rem; align-content: start; height: 100%; }
}
/* ---------- list: statement, table pushed right ---------- */
.list { padding-top: var(--section); }
.list__title { text-indent: 3vw; max-width: 16ch; }
:root[lang="ar"] .list__title { max-width: none; }
.list__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: 6rem; align-items: start; }
.list__picture { grid-column: 1 / span 4; grid-row: 1; align-self: end; }
.list__picture img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }
.list__name { grid-column: 7; grid-row: 1; color: var(--muted); padding-top: 0.15rem; }
.table { grid-column: 8 / span 5; grid-row: 1; }
.row { display: grid; grid-template-columns: 30% 1fr auto; gap: 1rem; padding-block: 13px; font-size: var(--step-body); }
.row dt { color: var(--muted); }
.row__val { text-align: end; }
.row--group { margin-top: 44px; }
@media (max-width: 760px) {
.list__title { text-indent: 0; }
.list__body { display: flex; flex-direction: column; margin-top: 3rem; }
.list__name { display: none; }
.table { width: 100%; order: 1; }
.row { grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 0 1rem; }
.row dt { grid-column: 1; grid-row: 1; font-size: var(--step-small); }
.row dd:not(.row__val) { grid-column: 1; grid-row: 2; }
.row__val { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.list__picture { order: 2; width: 60%; margin-inline-start: auto; margin-top: 3rem; }
}
/* ---------- faq ---------- */
.faq { padding-top: var(--section); padding-bottom: var(--section); overflow-x: clip; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.faq__title { grid-column: 1 / -1; margin-bottom: 5rem; }
.faq__list { grid-column: 5 / span 8; display: flex; flex-direction: column; gap: 0.75rem; }
/* rows, not boxes: a hairline between them, a gold line draws across on hover, the answer slides open */
.faq__list { gap: 0; box-shadow: inset 0 1px 0 #262626; }
.q { position: relative; box-shadow: inset 0 -1px 0 #262626; }
.q::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--accent); scale: 0 1; transform-origin: 0 50%; transition: scale 620ms var(--ease-expo); pointer-events: none; }
:root[dir="rtl"] .q::after { transform-origin: 100% 50%; }
.q[open]::after { scale: 1 1; }
.q summary { list-style: none; display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.6rem 0; cursor: pointer; font-size: var(--step-lead); font-weight: 500; line-height: 1.35; transition: color 240ms ease; }
.q summary::-webkit-details-marker { display: none; }
.q summary:focus-visible { outline-offset: 4px; }
.q__n { font-size: 0.75rem; letter-spacing: 0.14em; color: var(--muted); transition: color 240ms ease; }
.q__t { transition: translate 520ms var(--ease-expo); }
.q__icon { position: relative; width: 2.5rem; height: 2.5rem; flex: none; box-shadow: inset 0 0 0 1px #333333; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); transition: background-color 300ms ease, box-shadow 300ms ease; }
.q__icon::before, .q__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: currentColor; transition: rotate 460ms var(--ease-expo), background-color 300ms ease; }
.q__icon::after { rotate: 90deg; }
.q[open] .q__icon { background: var(--accent); box-shadow: none; }
.q[open] .q__icon::before, .q[open] .q__icon::after { background: var(--accent-ink); }
.q[open] .q__icon::after { rotate: 0deg; }
.q[open] .q__n, .q[open] summary { color: var(--accent); }
.q__body { overflow: clip; }
.q__body p { margin: 0; padding: 0 0 1.75rem calc(3rem + 1rem); max-width: 60ch; font-size: var(--step-body); line-height: 1.6; color: var(--ink); }
:root[dir="rtl"] .q__body p { padding: 0 calc(3rem + 1rem) 1.75rem 0; }
@media (hover: hover) and (pointer: fine) {
.q summary:hover { color: var(--accent); }
.q summary:hover .q__n { color: var(--accent); }
.q summary:hover .q__t { translate: 0.6rem 0; }
:root[dir="rtl"] .q summary:hover .q__t { translate: -0.6rem 0; }
.q summary:hover .q__icon { box-shadow: inset 0 0 0 1px var(--accent); }
.q:not([open]):hover::after { scale: 0.35 1; }
}
@media (max-width: 760px) {
.faq { display: block; }
.faq__title { margin-bottom: 2.5rem; }
.q { margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); }
.q summary { font-size: var(--step-body); font-weight: 600; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 0.75rem; padding: 1.25rem 0; }
.q__body p, :root[dir="rtl"] .q__body p { padding-inline-start: 2.75rem; padding-inline-end: 0; }
.q__icon { width: 2.25rem; height: 2.25rem; }
}
/* ---------- cta: one word is the button ---------- */
.cta { position: relative; z-index: 1; background: var(--bg); }
.cta__band { position: relative; display: block; min-height: max(60svh, calc(var(--step-word) * 1.2 + 12rem)); background: var(--accent); color: var(--accent-ink); text-decoration: none; overflow: clip; clip-path: polygon(0 3.5rem, 3.5rem 0, calc(100% - 3.5rem) 0, 100% 3.5rem, 100% 100%, 0 100%); }
.cta__note { position: absolute; top: 4rem; inset-inline: var(--margin); margin-inline: auto; max-width: 34ch; text-align: center; font-size: var(--step-lead); font-weight: 600; line-height: 1.35; }
.cta__arrow { display: inline-block; vertical-align: -0.1em; width: 1.1em; height: 1.1em; margin-inline-start: 0.4em; transition: transform var(--t-ui) var(--ease-out); }
:root[dir="rtl"] .cta__arrow { transform: scaleX(-1); }
.cta__word { position: absolute; inset-inline: var(--margin); bottom: 24px; font-family: var(--font-display); font-size: var(--step-word); line-height: 0.8; letter-spacing: -0.015em; text-transform: uppercase; white-space: nowrap; text-align: center; }
.cta__band:focus-visible { outline: 3px solid var(--ink); outline-offset: -8px; }
.cta__band:active .cta__word { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) {
.cta__band:hover, .cta__band:focus-visible { background: var(--ink); }
.cta__band:hover .cta__arrow { transform: translate(6px, -6px); }
:root[dir="rtl"] .cta__band:hover .cta__arrow { transform: scaleX(-1) translate(6px, -6px); }
}
@media (max-width: 760px) {
.cta__band { min-height: 46svh; clip-path: polygon(0 2rem, 2rem 0, calc(100% - 2rem) 0, 100% 2rem, 100% 100%, 0 100%); }
.cta__note { top: 2.75rem; font-size: var(--step-body); max-width: 70%; }
.cta__word { font-size: 25vw; } /* phone: fits WISHLIST on one line */
}
/* ---------- footer: inverted, uncovered by the page ---------- */
main { position: relative; z-index: 1; background: var(--bg); }
.foot { position: relative; z-index: 0; min-height: 86svh; row-gap: 3rem; display: grid; grid-template-rows: auto auto 1fr auto auto; background: #000000; color: var(--ink); padding: 2.5rem var(--margin) 1.25rem; }
.foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem var(--gutter); font-size: var(--step-body); }
.foot__col p { color: var(--muted); }
.foot__col .foot__lead { color: var(--ink); font-weight: 700; }
.foot__rating { width: 100%; max-width: 18rem; height: auto; background: none; margin-bottom: 1rem; }
.foot__mark { grid-row: 4; align-self: end; position: relative; }
.foot__mark svg { width: 100%; height: auto; fill: var(--ink); transform-origin: 50% 100%; }
.foot__mark-accent { fill: var(--accent); }
.foot__legal { margin-top: 20px; font-size: var(--step-small); color: var(--ink); max-width: none; }
@media (max-width: 1100px) { .foot { min-height: 0; } }
@media (max-width: 760px) {
.foot__cols { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
.foot { min-height: 0; }
}
/* ---------- motion (content stays visible without JS and under reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
.js .hero [data-open] img { clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 28px, 28px 28px, 0 28px); animation: load-open 1000ms var(--ease-in-out) 120ms forwards; }
.js .hero__video { transform: scale(1.08); animation: load-settle 2600ms var(--ease-expo) forwards; }
.js .hero__logo > * { opacity: 0; translate: 0 40%; animation: logo-rise 900ms var(--ease-expo) forwards; animation-delay: calc(240ms + var(--k, 0) * 70ms); }
.js .hero__logo-ar, .js .hero__alt { opacity: 0; animation: load-rise 800ms var(--ease-out) 360ms forwards; }
html.js:not(.is-ready) .hero *, html.js:not(.is-ready) .hero__video { animation-play-state: paused; }
.js .hero__word { transform: translateY(105%); animation: load-word 700ms var(--ease-expo) forwards; animation-delay: calc(60ms + var(--i, 0) * 90ms); }
.js .hero [data-load] { opacity: 0; transform: translateY(14px); animation: load-rise 600ms var(--ease-out) forwards; animation-delay: var(--d); }
.js [data-reveal] { opacity: 0.12; transform: translateY(32px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .shutter[data-reveal] { opacity: 1; transform: none; }
.js .shutter[data-reveal] img { clip-path: inset(0 0 40% 0); transform: scale(1.12); transition: clip-path 1000ms var(--ease-in-out), transform 1400ms var(--ease-soft); }
.js .shutter[data-reveal].is-in img { clip-path: inset(0); transform: none; }
.js .shutter[data-reveal] figcaption { opacity: 0.12; transition: opacity 600ms var(--ease-out) 400ms; }
.js .shutter[data-reveal].is-in figcaption { opacity: 1; }
.js .table .row { opacity: 0.12; transform: translateY(12px); transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(var(--r, 0) * 50ms); }
.js .table.is-in .row { opacity: 1; transform: none; }
.js .band__panel { clip-path: inset(0 0 100% 0); transition: clip-path 750ms var(--ease-in-out), flex-grow 500ms var(--ease-in-out); transition-delay: calc(var(--p, 0) * 60ms), 0ms; }
.js .band.is-in .band__panel { clip-path: inset(0); }
.duel[data-state="draw"] .duel__status { animation: draw-hit 260ms var(--ease-out); }
.duel.is-shot .duel__stage { animation: shake 260ms linear; }
}
@keyframes load-open { to { clip-path: var(--chamfer-lg); } }
@keyframes load-settle { to { transform: none; } }
@keyframes logo-rise { to { opacity: 1; translate: 0 0; } }
@keyframes load-word { to { transform: none; } }
@keyframes load-rise { to { opacity: 1; transform: none; } }
@keyframes draw-hit { from { transform: scale(1.25); } to { transform: none; } }
@keyframes shake { 0%,100% { transform: none; } 20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-3px, 2px); } 80% { transform: translate(2px, -1px); } }
/* signature: the monument scales with the scroll; the footer mark grows into place */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.hero__name { animation: name-shrink linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
.hero__bg { animation: hero-drift linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
.foot__mark svg { animation: mark-grow linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
}
}
@keyframes name-shrink { from { scale: 1; } to { scale: 0.93; } }
@keyframes hero-drift { from { translate: 0 0; } to { translate: 0 14%; } }
@keyframes mark-grow { from { scale: 0.94; } to { scale: 1; } }
@media (prefers-reduced-motion: reduce) {
.bar, .menu, .menu__link, .menu__side, .bar__plate, .mark path, .mark__t { transition: none; }
}
/* ---------- depth: film grain over everything, warm light behind the big moments ---------- */
body::after { content: ""; position: fixed; inset: -50%; z-index: 100; pointer-events: none; opacity: 0.07; background-image: url("data:image/svg+xml;utf8,"); }
@media (prefers-reduced-motion: no-preference) { body::after { animation: grain 0.9s steps(5) infinite; } }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
[data-tilt] { transition: transform 500ms var(--ease-out); transform-style: preserve-3d; will-change: transform; }
.duel { position: relative; isolation: isolate; }
.duel::before { content: ""; position: absolute; inset: 20% 0 -10%; z-index: -1; pointer-events: none; background: radial-gradient(50% 45% at 50% 55%, rgba(224,190,133,0.16), rgba(224,190,133,0) 70%); } /* warm lamp light taste-skill-ignore */
.rules__stage { isolation: isolate; }
.rules__stage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 70% at 78% 50%, rgba(224,190,133,0.10), rgba(0,0,0,0) 70%); } /* taste-skill-ignore */
:root[dir="rtl"] .rules__stage::before { background: radial-gradient(60% 70% at 22% 50%, rgba(224,190,133,0.10), rgba(0,0,0,0) 70%); } /* taste-skill-ignore */
.media { position: relative; isolation: isolate; }
.media::before { content: ""; position: absolute; inset: 10% -10% 0; z-index: -1; pointer-events: none; background: radial-gradient(45% 50% at 35% 60%, rgba(224,190,133,0.09), rgba(224,190,133,0) 70%); } /* taste-skill-ignore */
/* the brand's outlined letters, set huge behind a section and drifting with the scroll */
.ghost { position: absolute; z-index: -1; inset-inline-end: -2vw; top: 0; font-family: var(--font-display); font-size: 30vw; line-height: 0.8; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px rgba(224,190,133,0.16); pointer-events: none; user-select: none; white-space: nowrap; }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .ghost { animation: ghost-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; } } }
@keyframes ghost-drift { from { transform: translateY(20%); } to { transform: translateY(-20%); } }
.list, .showcase, .duel { position: relative; isolation: isolate; overflow-x: clip; }
.ghost { inset-inline-end: 0; }
/* ---------- latest: one feature, two short posts ---------- */
.news { padding-top: var(--section); }
.news__title { margin-bottom: 3rem; }
.news__grid { display: grid; grid-template-columns: 7fr 5fr; grid-template-rows: 1fr 1fr; gap: var(--gutter); }
.news__card { position: relative; display: block; overflow: clip; min-height: 15rem; clip-path: var(--chamfer-lg); color: var(--ink); text-decoration: none; background: #111; }
.news__card--lead { grid-row: 1 / span 2; min-height: 34rem; }
.news__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55) saturate(0.85); transition: transform 900ms var(--ease-expo), filter 400ms ease; }
.news__body { position: absolute; inset-inline: 0; bottom: 0; display: grid; gap: 0.4rem; padding: 3rem 1.5rem 1.4rem; background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0)); } /* neutral scrim taste-skill-ignore */
.news__tag { color: var(--accent); font-weight: 700; }
.news__head { font-family: var(--font-display); font-size: var(--step-lead); line-height: 1.1; text-transform: uppercase; }
.news__card--lead .news__head { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); }
.news__text { max-width: 44ch; color: var(--ink); }
:root[lang="ar"] .news__head { font-family: "Noto Kufi Arabic", var(--font-display); font-weight: 800; line-height: 1.4; }
@media (hover: hover) and (pointer: fine) { .news__card:hover img { transform: scale(1.06); filter: brightness(0.7) saturate(1); } }
@media (max-width: 860px) {
.news__grid { grid-template-columns: 1fr; grid-template-rows: none; }
.news__card--lead { grid-row: auto; min-height: 26rem; }
}
.cta__os { display: flex; justify-content: center; align-items: center; gap: 0.45rem; margin-top: 0.85rem; white-space: nowrap; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
:root[lang="ar"] .cta__os { letter-spacing: 0; }
@media (max-width: 760px) { .ghost { display: none; } }
/* ---------- footer: a field of gold dots rising like a level meter ---------- */
.foot { overflow: clip; isolation: isolate; }
.foot__wave { position: absolute; inset-inline: 0; bottom: 0; height: 70%; width: 100%; z-index: -1; pointer-events: none; }
/* the dots rise behind the big mark and fade out before the small print */
.foot__wave { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0,0,0,0.25) 66%, transparent 76%); mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0,0,0,0.25) 66%, transparent 76%); }
/* legal: centred under the mark, as before; quiet links, the rating with its note, the small print */
.foot__legalrow { grid-row: 5; justify-self: center; display: grid; justify-items: center; gap: 1.4rem; margin: 1rem 0 1.5rem; text-align: center; }
.foot__legaltop { display: grid; justify-items: center; gap: 1.4rem; }
.foot__links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem 0; font-size: 0.8125rem; }
.foot__links a, .foot__cookies { padding: 0 1rem; background: none; color: #d6d0bd; font: inherit; text-decoration: none; transition: color var(--t-hover) ease; }
.foot__links > * + * { box-shadow: inset 1px 0 0 #3f3f3f; } /* separator taste-skill-ignore */
:root[dir="rtl"] .foot__links > * + * { box-shadow: inset -1px 0 0 #3f3f3f; } /* taste-skill-ignore */
@media (hover: hover) and (pointer: fine) { .foot__links a:hover, .foot__cookies:hover { color: var(--accent); } }
.foot__rate { display: flex; align-items: center; gap: 1rem; text-align: start; }
.foot__rating { width: 12rem; max-width: none; height: auto; margin: 0; background: none; }
.foot__ratenote { margin: 0; font-size: 0.6875rem; line-height: 1.6; color: var(--muted); }
.foot__legalbot { display: grid; justify-items: center; gap: 0.2rem; font-size: 0.75rem; color: var(--muted); }
.foot__legalbot p { margin: 0; }
@media (max-width: 720px) { .foot__links { gap: 0.75rem 1.4rem; } .foot__links a, .foot__cookies { padding: 0; } .foot__links > * + *, :root[dir="rtl"] .foot__links > * + * { box-shadow: none; } }
/* ---------- Arabic logotype: shown in place of the Latin one when the page is in Arabic ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.foot__mark-ar { display: none; }
.foot__mark-ar .ar-acc, .hero__logo-ar .ar-acc { fill: var(--accent); }
:root[lang="ar"] .foot__mark-en { display: none; }
:root[lang="ar"] .foot__mark-ar { display: block; width: 100%; height: auto; fill: var(--ink); transform-origin: 50% 100%; }
.hero__logo-ar { display: block; width: min(44vw, 40rem); height: auto; fill: var(--ink); }
:root[lang="ar"] .hero__name { padding-top: 0; margin-top: 0; line-height: 1; }
@media (max-width: 860px) { .hero__logo-ar { width: 82vw; } }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { :root[lang="ar"] .foot__mark-ar { animation: mark-grow linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; } } }
/* ---------- UX pass: readable intro, quick facts, grouped Season Zero, phone dock ---------- */
.intro__side { grid-column: 8 / span 5; display: grid; gap: 1.5rem; }
.intro__top .head { grid-column: 1 / span 7; }
.intro__lead { font-size: var(--step-lead); line-height: 1.45; color: var(--ink); max-width: 34ch; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.facts li { display: grid; gap: 0.2rem; padding: 0.85rem 1rem; background: var(--surface); clip-path: var(--chamfer); }
.facts__k { font-size: var(--step-small); color: var(--muted); }
.facts__v { font-family: var(--font-display); font-size: var(--step-lead); text-transform: uppercase; }
:root[lang="ar"] .facts__v { font-family: "Noto Kufi Arabic", var(--font-display); font-weight: 800; }
@keyframes opening-window { from { clip-path: inset(8% 12%); } to { clip-path: inset(0); } }
@media (max-width: 860px) {
.intro__side { margin-top: 1.5rem; }
.facts { grid-template-columns: repeat(2, 1fr); }
.intro__lead { font-size: var(--step-body); }
}
.duel__intro { font-size: var(--step-lead); line-height: 1.45; color: var(--ink); }
.rule__line { color: var(--ink); }
@media (max-width: 860px) { .duel__intro { font-size: var(--step-body); } }
.season__title { margin-bottom: 3rem; }
.season { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gutter); }
.season__block { grid-column: span 2; display: flex; flex-direction: column; gap: 0.75rem; padding: 1.75rem; background: var(--surface); clip-path: var(--chamfer-lg); }
.season__block:nth-child(4), .season__block:nth-child(5) { grid-column: span 3; }
.season__h { font-family: var(--font-text); font-size: var(--step-small); font-weight: 700; color: var(--accent); text-transform: none; }
.season__big { font-family: var(--font-display); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1.05; text-transform: uppercase; }
:root[lang="ar"] .season__big { font-family: "Noto Kufi Arabic", var(--font-display); font-weight: 800; line-height: 1.4; }
.season__note { color: var(--muted); }
.season__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.season__list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; }
.season__list b { font-weight: 600; }
.season__list span { color: var(--muted); }
.season__list--bars li { position: relative; padding-bottom: 0.75rem; }
.bar-track { position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: #2e2e2e; }
.bar-track::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 6%; background: var(--accent); }
.season__block--cta { justify-content: flex-start; }
.season__block--cta .button { align-self: flex-start; margin-top: auto; }
@media (max-width: 860px) {
.season { grid-template-columns: 1fr; }
.season__block, .season__block:nth-child(4), .season__block:nth-child(5) { grid-column: auto; }
}
/* phone: a Wishlist dock once the hero has scrolled away; it steps aside for the wishlist band */
.dock { display: none; }
@media (max-width: 860px) {
.dock { display: block; position: fixed; inset-inline: 0; bottom: 0; z-index: 35; padding: 0.75rem var(--margin) calc(0.75rem + env(safe-area-inset-bottom)); background: #000; transform: translateY(110%); transition: transform 360ms var(--ease-out); }
.dock.is-on { transform: none; }
.dock__btn { width: 100%; min-height: 3.25rem; }
}
/* footer logo: the letters rise in one by one, then the gold accent breathes */
@media (prefers-reduced-motion: no-preference) {
.js .foot__mark svg > * { transform-box: fill-box; transform-origin: 50% 100%; transform: translateY(22%); opacity: 0.15; transition: transform 1000ms var(--ease-expo), opacity 700ms ease; }
.js .foot__mark svg > :nth-child(2) { transition-delay: 70ms; } .js .foot__mark svg > :nth-child(3) { transition-delay: 140ms; }
.js .foot__mark svg > :nth-child(4) { transition-delay: 210ms; } .js .foot__mark svg > :nth-child(5) { transition-delay: 280ms; }
.js .foot__mark svg > :nth-child(6) { transition-delay: 350ms; } .js .foot__mark svg > :nth-child(7) { transition-delay: 420ms; }
.js .foot__mark.is-in svg > * { transform: none; opacity: 1; }
.foot__mark.is-in .foot__mark-accent, .foot__mark.is-in .ar-acc { animation: accent-breathe 3.2s ease-in-out 1.2s infinite alternate; }
}
@keyframes accent-breathe { from { filter: drop-shadow(0 0 0 rgba(224,190,133,0)); } to { filter: drop-shadow(0 0 14px rgba(224,190,133,0.75)); } }
/* ---------- socials: icons only ---------- */
.socials { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.socials__a { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; background: #141414; color: var(--ink); clip-path: var(--chamfer); transition: background-color var(--t-hover) ease, color var(--t-hover) ease, translate 300ms var(--ease-expo); }
.socials__a svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.socials__a:active { scale: 0.94; }
@media (hover: hover) and (pointer: fine) { .socials__a:hover { background: var(--accent); color: var(--accent-ink); translate: 0 -2px; } }
.menu .socials { gap: 0.45rem; }
/* studio column: the name large, the rest in small capitals */
.foot__col .foot__studio { margin: 0 0 0.6rem; font-family: var(--font-display); font-size: 2rem; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.foot__small { margin: 0 0 0.75rem; font-size: 0.6875rem; line-height: 1.7; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
:root[lang="ar"] .foot__small, :root[lang="ar"] .socials__a { letter-spacing: 0; font-size: 0.8125rem; }
.foot__mail span { display: inline-block; transition: translate 380ms var(--ease-expo); }
:root[dir="rtl"] .foot__mail span { scale: -1 1; }
@media (hover: hover) and (pointer: fine) { .foot__mail:hover span { translate: 2px -2px; } }
/* ---------- sub pages: press, brand, wallpapers, creators ---------- */
.subpage main { padding-top: 7rem; }
.bar__link[aria-current="page"] { color: var(--accent); }
.phero { padding-block: 3rem 2rem; display: grid; gap: 1.5rem; }
.phero__lead { font-size: var(--step-lead); line-height: 1.45; max-width: 46ch; }
.phero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.button--dl .button__meta { margin-inline-start: 0.6rem; font-size: var(--step-small); opacity: 0.7; }
.psec { padding-top: clamp(4rem, 8vw, 7rem); }
.psec__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.5rem); line-height: 1.05; text-transform: uppercase; margin-bottom: 1.75rem; }
:root[lang="ar"] .psec__title { font-family: "Noto Kufi Arabic", var(--font-display); font-weight: 800; line-height: 1.4; }
.psec__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.75rem; }
.psec__row .psec__title { margin-bottom: 0; }
.psec__note { color: var(--muted); }
.psec__text { max-width: 62ch; }
.psec__text + .psec__text { margin-top: 1rem; }
.sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.5rem; margin: 0; }
.sheet div { padding: 1.1rem 1.25rem; background: var(--surface); clip-path: var(--chamfer); }
.sheet dt { font-size: var(--step-small); color: var(--muted); }
.sheet dd { margin: 0.25rem 0 0; font-weight: 600; }
.copies { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--gutter); }
.copy { padding: 1.5rem; background: var(--surface); clip-path: var(--chamfer-lg); display: grid; gap: 1rem; align-content: start; }
.copy p + p { margin-top: 0.9rem; }
.copy__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.copy__h { font-size: var(--step-small); color: var(--accent); font-weight: 700; }
.copy__btn, .tag { padding: 0.5rem 0.9rem; background: #232323; color: var(--ink); font-weight: 600; font-size: var(--step-small); clip-path: var(--chamfer); transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.copy__btn.is-done, .tag.is-done, .swatch.is-done .swatch__hex { color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .copy__btn:hover, .tag:hover { background: var(--accent); color: var(--accent-ink); } }
.feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.5rem; }
.feats li { display: grid; gap: 0.4rem; padding: 1.4rem; background: var(--surface); clip-path: var(--chamfer); }
.feats b { font-family: var(--font-display); font-weight: 400; font-size: var(--step-lead); text-transform: uppercase; color: var(--accent); }
:root[lang="ar"] .feats b { font-family: "Noto Kufi Arabic", var(--font-display); font-weight: 800; }
.dlgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.dlcard { margin: 0; }
.dlcard__img { display: block; aspect-ratio: 16 / 10; overflow: clip; background: #0d0d0d; clip-path: var(--chamfer); }
.dlcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-expo), filter 300ms ease; }
.dlcard figcaption, .wall figcaption, .logocard figcaption, .badgecard figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.75rem; font-size: var(--step-small); }
@media (hover: hover) and (pointer: fine) { .dlcard__img:hover img, .wall__img:hover img { transform: scale(1.04); } }
.logorow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.logotile { display: grid; place-items: center; aspect-ratio: 16 / 9; padding: 2.5rem; background: var(--surface); clip-path: var(--chamfer); }
.logotile img { max-height: 100%; width: auto; max-width: 100%; background: none; object-fit: contain; }
.logogrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.logocard { margin: 0; }
.logocard__img { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 2.5rem; background: var(--surface); clip-path: var(--chamfer-lg); }
.logocard__img--light { background: #f4f3f1; }
.logocard__img img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; background: none; }
.logocard__dl { display: flex; gap: 0.5rem; }
.swatches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
.swatch { display: grid; gap: 0.3rem; width: 100%; text-align: start; padding: 0 0 1rem; background: var(--surface); clip-path: var(--chamfer); }
.swatch__chip { display: block; aspect-ratio: 4 / 3; background: var(--c); margin-bottom: 0.6rem; }
.swatch > span:not(.swatch__chip) { padding-inline: 1rem; }
.swatch__name { font-weight: 700; }
.swatch__hex { font-weight: 600; }
.swatch__meta { font-size: var(--step-small); color: var(--muted); }
.typespecs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.typespec { padding: 2rem; background: var(--surface); clip-path: var(--chamfer-lg); display: grid; gap: 0.75rem; }
.typespec__sample { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); font-weight: 600; }
.typespec__sample--display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; }
.rules-list { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: 0.6rem; max-width: 70ch; }
.badgecard { margin: 2rem 0 0; max-width: 22rem; }
.badgecard img { background: none; }
.walls { display: grid; gap: var(--gutter); }
.walls--desk { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.walls--phone { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wall { margin: 0; }
.wall__img { display: block; overflow: clip; clip-path: var(--chamfer); background: #0d0d0d; }
.wall--desk .wall__img { aspect-ratio: 16 / 9; }
.wall--phone .wall__img { aspect-ratio: 1170 / 2532; }
.wall__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-expo); }
.wall figcaption { flex-wrap: wrap; gap: 0.25rem 1rem; }
.wall figcaption .link { white-space: nowrap; }
.tags { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag { font-size: var(--step-lead); padding: 0.75rem 1.25rem; }
@media (max-width: 860px) {
.copies, .typespecs { grid-template-columns: 1fr; }
.dlgrid, .logorow, .logogrid, .walls--desk { grid-template-columns: 1fr 1fr; }
.walls--phone { grid-template-columns: 1fr 1fr; }
.swatches { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) { .dlgrid, .logorow, .logogrid, .walls--desk { grid-template-columns: 1fr; } }
/* ---------- loader: the mark assembles in the middle, a gold seam cuts across, the screen splits open ---------- */
.loader { display: none; }
.js .loader { display: block; position: fixed; inset: 0; z-index: 200; pointer-events: none; }
html.js:not(.is-ready) { overflow: hidden; }
.loader__panel { position: absolute; inset-inline: 0; height: 50.5%; background: #000000; transition: translate 900ms cubic-bezier(0.76, 0, 0.24, 1); }
.loader__panel--top { top: 0; }
.loader__panel--bot { bottom: 0; }
.loader__seam { position: absolute; inset-inline: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--accent); scale: 0 1; opacity: 0; }
.loader__core { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: 2rem; transition: opacity 360ms ease, scale 600ms var(--ease-expo), filter 360ms ease; }
.loader__mark { width: clamp(5rem, 11vw, 8rem); height: auto; overflow: visible; }
.loader__l, .loader__r { fill: var(--ink); fill-opacity: 0; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transform-box: fill-box; }
.loader__t { fill: var(--accent); transform-box: fill-box; transform-origin: 50% 0; opacity: 0; }
.loader__bar { width: 7.5rem; height: 2px; background: #262626; overflow: clip; }
.loader__bar i { display: block; height: 100%; background: var(--accent); scale: 0 1; transform-origin: 0 50%; }
:root[dir="rtl"] .loader__bar i { transform-origin: 100% 50%; }
@media (prefers-reduced-motion: no-preference) {
.loader__l { animation: ld-in-l 820ms var(--ease-expo) 120ms both, ld-draw 900ms ease-out 120ms forwards, ld-fill 380ms ease 860ms forwards; }
.loader__r { animation: ld-in-r 820ms var(--ease-expo) 120ms both, ld-draw 900ms ease-out 120ms forwards, ld-fill 380ms ease 860ms forwards; }
.loader__t { animation: ld-drop 560ms cubic-bezier(0.34, 1.56, 0.64, 1) 980ms forwards; }
.loader__mark { animation: ld-pulse 700ms var(--ease-out) 1300ms; }
.loader__bar i { animation: ld-bar 1400ms var(--ease-in-out) 100ms forwards; }
}
@media (prefers-reduced-motion: reduce) {
.loader__l, .loader__r { fill-opacity: 1; stroke-dashoffset: 0; }
.loader__t { opacity: 1; }
.loader__bar i { scale: 1 1; }
.loader__panel { transition: opacity 300ms ease; }
}
/* opening */
.loader.is-out .loader__core { opacity: 0; scale: 1.18; filter: blur(6px); }
.loader.is-out .loader__seam { animation: ld-seam 760ms var(--ease-expo) forwards; }
.loader.is-out .loader__panel--top { translate: 0 -100%; transition-delay: 260ms; }
.loader.is-out .loader__panel--bot { translate: 0 100%; transition-delay: 260ms; }
.loader.is-gone { visibility: hidden; }
/* a later page in the same visit: no assembly, the screen just opens */
.intro-seen .loader__core { display: none; }
.intro-seen .loader.is-out .loader__seam { animation-duration: 420ms; }
.intro-seen .loader.is-out .loader__panel { transition-duration: 700ms; transition-delay: 60ms; }
/* leaving for another page: the screen closes before the next one loads */
.loader.is-leaving { visibility: visible; pointer-events: auto; }
.loader.is-leaving .loader__core { display: none; }
.loader.is-leaving .loader__panel { transition-duration: 480ms; transition-delay: 0ms; }
@media (prefers-reduced-motion: reduce) {
.loader.is-out .loader__panel { translate: none; opacity: 0; }
.loader.is-out .loader__seam { animation: none; }
.loader.is-leaving .loader__panel { opacity: 1; }
}
@keyframes ld-in-l { from { translate: -42% 0; rotate: -7deg; opacity: 0; } to { translate: 0 0; rotate: 0deg; opacity: 1; } }
@keyframes ld-in-r { from { translate: 42% 0; rotate: 7deg; opacity: 0; } to { translate: 0 0; rotate: 0deg; opacity: 1; } }
@keyframes ld-draw { to { stroke-dashoffset: 0; } }
@keyframes ld-fill { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes ld-drop { from { translate: 0 -260%; opacity: 0; } 40% { opacity: 1; } to { translate: 0 0; opacity: 1; } }
@keyframes ld-pulse { 0% { filter: drop-shadow(0 0 0 rgba(224,190,133,0)); } 35% { filter: drop-shadow(0 0 22px rgba(224,190,133,0.65)); } 100% { filter: drop-shadow(0 0 0 rgba(224,190,133,0)); } } /* gold flash as the point lands taste-skill-ignore */
@keyframes ld-bar { to { scale: 1 1; } }
@keyframes ld-seam { 0% { scale: 0 1; opacity: 1; } 55% { scale: 1 1; opacity: 1; } 100% { scale: 1 1; opacity: 0; } }
/* ---------- frames: a thin rule with gold corner brackets; the last, decisive item is filled gold ---------- */
.frame, .facts li, .season__block, .feats li, .rules:not(.is-live) .rule { position: relative; border: 1px solid rgba(208,197,154,0.28); background: #0b0b0a; clip-path: none; }
.frame::before, .frame::after,
.facts li::before, .facts li::after, .season__block::before, .season__block::after, .feats li::before, .feats li::after,
.rules:not(.is-live) .rule::before, .rules:not(.is-live) .rule::after { content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; transition: width 420ms var(--ease-expo), height 420ms var(--ease-expo); }
.frame::before, .facts li::before, .season__block::before, .feats li::before, .rules:not(.is-live) .rule::before { top: -1px; inset-inline-start: -1px; border-top: 2px solid var(--accent); border-inline-start: 2px solid var(--accent); }
.frame::after, .facts li::after, .season__block::after, .feats li::after, .rules:not(.is-live) .rule::after { bottom: -1px; inset-inline-end: -1px; border-bottom: 2px solid var(--accent); border-inline-end: 2px solid var(--accent); }
@media (hover: hover) and (pointer: fine) {
.frame:hover::before, .frame:hover::after, .facts li:hover::before, .facts li:hover::after, .season__block:hover::before, .season__block:hover::after, .feats li:hover::before, .feats li:hover::after { width: 30px; height: 30px; }
}
.frame--gold, .season__block--cta, .rules:not(.is-live) .rule:last-child { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.frame--gold::before, .frame--gold::after, .season__block--cta::before, .season__block--cta::after, .rules:not(.is-live) .rule:last-child::before, .rules:not(.is-live) .rule:last-child::after { display: none; }
.season__block--cta .season__h, .season__block--cta .season__note { color: var(--accent-ink); }
.season__block--cta .button { background: var(--accent-ink); color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .season__block--cta .button:hover { background: #000000; color: var(--ink); } }
/* rules, stacked (phone, reduced motion): framed cards */
.rules:not(.is-live) .rules__list { gap: 0.75rem; }
.rules:not(.is-live) .rule { padding: 1.4rem 1.5rem 1.5rem; }
.rules:not(.is-live) .rule__word { font-size: clamp(2.6rem, 12vw, 5.5rem); }
.rules:not(.is-live) .rule__line { margin-top: 0.5rem; font-size: var(--step-body); font-weight: 600; }
.rules:not(.is-live) .rule:last-child .rule__word, .rules:not(.is-live) .rule:last-child .rule__line { color: var(--accent-ink); }
.rules__rail { display: none; }
/* rules, held scene: a rail of four framed cards tracks the scroll; the live one fills gold */
.rules.is-live .rules__rail { display: grid; grid-column: 1 / span 7; grid-row: 1; align-self: start; margin: 11svh 0 0; padding: 0; list-style: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; position: relative; z-index: 1; }
:root[dir="rtl"] .rules.is-live .rules__rail { grid-column: 6 / span 7; }
.rules__rail li { padding: 0.8rem 0.9rem 0.9rem; display: grid; gap: 0.25rem; transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease; }
.rules__rail b { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1; text-transform: uppercase; }
:root[lang="ar"] .rules__rail b { font-family: "Noto Kufi Arabic", var(--font-display); font-weight: 800; font-size: 1.1rem; line-height: 1.4; }
.rules__rail span { font-size: 0.75rem; font-weight: 600; color: var(--muted); transition: color 320ms ease; }
.rules__rail .nums { font-size: 0.625rem; letter-spacing: 0.12em; color: var(--accent); }
.rules__rail li.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.rules__rail li.is-on span, .rules__rail li.is-on .nums { color: var(--accent-ink); }
.rules__rail li.is-on::before, .rules__rail li.is-on::after { opacity: 0; }
/* ---------- operators: one ID card each ---------- */
.ops { padding-top: var(--section); }
.ops__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; margin-bottom: 3.5rem; }
.ops__head .head { grid-column: 1 / span 7; }
.ops__lead { grid-column: 9 / span 4; font-size: var(--step-lead); line-height: 1.45; }
.ops__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 3rem); perspective: 1600px; }
.idc { --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; --cut: 40px; position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 1.1rem; padding: 1.4rem 1.6rem 1.1rem; color: var(--accent-ink); outline: none;
background: repeating-radial-gradient(circle at 88% 22%, rgba(23,23,23,0.05) 0 1px, rgba(23,23,23,0) 1px 7px), linear-gradient(135deg, #e6c78f, #d8b67c 60%, #e2c287); /* security print and paper taste-skill-ignore */
clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 600ms var(--ease-out); }
.idc.is-hover { transition: transform 120ms linear; }
.idc:focus-visible { box-shadow: inset 0 0 0 3px var(--accent-ink); }
.idc::after { content: "+"; position: absolute; inset-inline-end: 1rem; bottom: 0.55rem; font-weight: 700; font-size: 1rem; line-height: 1; }
.idc__foil { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; mix-blend-mode: overlay; transition: opacity 400ms ease;
background: radial-gradient(38% 46% at var(--mx) var(--my), rgba(255,255,255,0.55), rgba(255,255,255,0) 70%), conic-gradient(from 200deg at var(--mx) var(--my), rgba(120,255,230,0.28), rgba(255,230,140,0.3), rgba(255,120,200,0.24), rgba(140,170,255,0.28), rgba(120,255,230,0.28)); } /* holographic foil taste-skill-ignore */
.idc.is-hover .idc__foil { opacity: 1; }
.idc__top { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 1.1rem; padding-bottom: 1rem; box-shadow: inset 0 -3px 0 var(--accent-ink); }
.idc__mark { width: 2.4rem; height: auto; overflow: visible; }
.idc__mark path, .idc__mark .mark__t { fill: var(--accent-ink); }
.idc__studio, .idc__no { margin: 0; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1.45; text-transform: uppercase; }
.idc__no { text-align: end; }
.idc__no b { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; letter-spacing: 0; vertical-align: -0.12em; }
:root[lang="ar"] .idc__studio, :root[lang="ar"] .idc__no { letter-spacing: 0; font-size: 0.6875rem; }
.idc__code { width: 100%; max-width: 11rem; height: 2.2rem; fill: var(--accent-ink); justify-self: center; }
.idc__body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1.4rem; }
.idc__photo { margin: 0; display: grid; gap: 0.6rem; align-content: start; }
.idc__photo > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; background: #171717; filter: grayscale(1) sepia(0.35) contrast(1.15) brightness(0.92); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); transition: filter 500ms ease; grid-area: 1 / 1; }
.idc.is-hover .idc__photo > img, .idc.is-color .idc__photo > img, .idc:focus-within .idc__photo > img { filter: none; }
.idc__scan { grid-area: 1 / 1; pointer-events: none; background: linear-gradient(to bottom, rgba(224,190,133,0) 0%, rgba(224,190,133,0.7) 48%, rgba(255,255,255,0.9) 50%, rgba(224,190,133,0) 52%); background-size: 100% 220%; background-position: 0 -120%; opacity: 0; } /* scanner sweep taste-skill-ignore */
.idc__photo.is-scanning .idc__scan { animation: idc-scan 650ms var(--ease-in-out); }
.idc__seal { grid-area: 1 / 1; align-self: end; justify-self: end; margin: 0 0.6rem 0.6rem 0; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(from var(--seal, 0deg), #f5e3b8, #bfa36e, #fff2cc, #a88f5c, #f5e3b8); box-shadow: 0 0 0 2px rgba(23,23,23,0.6); } /* hologram seal taste-skill-ignore */
:root[dir="rtl"] .idc__seal { margin: 0 0 0.6rem 0.6rem; }
.idc__seal-mark { width: 1.6rem; height: auto; overflow: visible; }
.idc__seal-mark path, .idc__seal-mark .mark__t { fill: var(--accent-ink); }
.idc__tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.idc__tab { min-height: 2rem; padding: 0 0.55rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); box-shadow: inset 0 0 0 1.5px var(--accent-ink); transition: background-color 200ms ease, color 200ms ease; }
:root[lang="ar"] .idc__tab { letter-spacing: 0; font-size: 0.75rem; }
.idc__tab[aria-selected="true"] { background: var(--accent-ink); color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .idc__tab:hover { background: rgba(23,23,23,0.15); } .idc__tab[aria-selected="true"]:hover { background: var(--accent-ink); } }
.idc__info { display: flex; flex-direction: column; min-width: 0; }
.idc__k, .idc__f dt { margin: 0; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.72; }
:root[lang="ar"] .idc__k, :root[lang="ar"] .idc__f dt { letter-spacing: 0; font-size: 0.75rem; }
.idc__name { margin: 0.3rem 0 1rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 1rem + 1.6vw, 2.5rem); line-height: 1; text-transform: uppercase; }
:root[lang="ar"] .idc__name { font-family: "Noto Kufi Arabic", var(--font-display); font-weight: 800; line-height: 1.35; }
.idc__redact { position: relative; padding: 0.05em 0.15em; margin-inline-start: -0.15em; font: inherit; text-transform: inherit; color: inherit; text-align: start; cursor: pointer; }
.idc__redact::after { content: ""; position: absolute; inset: 0.05em 0; background: var(--accent-ink); transform-origin: 0 50%; transition: scale 520ms var(--ease-expo); }
:root[dir="rtl"] .idc__redact::after { transform-origin: 100% 50%; }
.idc__redact.is-open::after { scale: 0 1; }
.idc__fields { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
.idc__f { padding: 0.55rem 0 0.6rem; box-shadow: inset 0 1.5px 0 rgba(23,23,23,0.35); display: grid; gap: 0.2rem; align-content: start; }
.idc__f dd { margin: 0; font-size: 0.875rem; font-weight: 600; line-height: 1.35; }
.idc__f:nth-child(n+3) { grid-column: 1 / -1; }
.idc__mrz { display: grid; gap: 0.1rem; padding-top: 0.75rem; box-shadow: inset 0 3px 0 var(--accent-ink); direction: ltr; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.75rem; letter-spacing: 0.22em; white-space: nowrap; overflow: clip; opacity: 0.85; }
@keyframes idc-scan { 0% { opacity: 1; background-position: 0 -120%; } 100% { opacity: 1; background-position: 0 120%; } }
@media (max-width: 1100px) { .ops__cards { grid-template-columns: 1fr; max-width: 46rem; } }
@media (max-width: 860px) {
.ops__head { display: block; margin-bottom: 2rem; }
.ops__lead { margin-top: 1.25rem; font-size: var(--step-body); }
}
@media (max-width: 560px) {
.idc { --cut: 26px; padding: 1.1rem 1.1rem 0.9rem; }
.idc__top { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; }
.idc__code { display: none; }
.idc__body { grid-template-columns: 1fr; gap: 1rem; }
.idc__photo > img { aspect-ratio: 5 / 4; object-position: 50% 25%; }
.idc__fields { grid-template-columns: 1fr 1fr; }
.idc__mrz { font-size: 0.625rem; letter-spacing: 0.12em; }
}
@media (prefers-reduced-motion: reduce) { .idc, .idc__redact::after, .idc__photo > img { transition: none; } .idc__photo.is-scanning .idc__scan { animation: none; } }
.duel__face--you figcaption { text-align: end; }
/* ---------- footer email list: one line, a prompt, a gold line that draws as you type ---------- */
.join { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: end; gap: 2rem var(--gutter); padding: 1.5rem 0 3rem; box-shadow: inset 0 -1px 0 #1f1f1f; }
.join__k { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
:root[lang="ar"] .join__k { letter-spacing: 0; font-size: var(--step-small); }
.join__dot { width: 7px; height: 7px; background: var(--accent); box-shadow: 0 0 0 0 rgba(224,190,133,0.6); } /* status light taste-skill-ignore */
@media (prefers-reduced-motion: no-preference) { .join__dot { animation: join-ping 2.2s var(--ease-out) infinite; } }
.join__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.75rem); line-height: 0.98; text-transform: uppercase; }
:root[lang="ar"] .join__title { font-family: "Noto Kufi Arabic", var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); line-height: 1.3; }
.join__text { margin: 0.9rem 0 0; color: var(--muted); max-width: 40ch; }
.join__field { position: relative; display: flex; align-items: center; gap: 0.75rem; padding-bottom: 0.6rem; box-shadow: inset 0 -1px 0 #3a3a3a; }
.join__prompt { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 1.25rem; color: var(--accent); }
:root[dir="rtl"] .join__prompt { scale: -1 1; }
@media (prefers-reduced-motion: no-preference) { .join__field:focus-within .join__prompt { animation: join-blink 1s steps(1) infinite; } }
.join__input { flex: 1; min-width: 0; min-height: 3.25rem; padding: 0; border: 0; background: none; color: var(--ink); font: 500 clamp(1.15rem, 1rem + 0.6vw, 1.6rem) var(--font-text); caret-color: var(--accent); outline: none; }
:root[dir="rtl"] .join__input { text-align: right; }
.join__input::placeholder { color: #5c5a52; }
.join__btn { flex: none; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3rem; padding: 0 1.15rem; font-weight: 700; font-size: var(--step-body); background: var(--accent); color: var(--accent-ink); clip-path: var(--chamfer); transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.join__btn:active { transform: scale(0.97); }
.join__arrow { width: 1.1rem; height: 1.1rem; fill: currentColor; transition: translate 380ms var(--ease-expo); }
:root[dir="rtl"] .join__arrow { scale: -1 1; }
@media (hover: hover) and (pointer: fine) { .join__btn:hover { background: var(--ink); } .join__btn:hover .join__arrow { translate: 4px 0; } :root[dir="rtl"] .join__btn:hover .join__arrow { translate: -4px 0; } }
.join__line { position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--accent); scale: 0 1; transform-origin: 0 50%; transition: scale 700ms var(--ease-expo), background-color 200ms ease; }
:root[dir="rtl"] .join__line { transform-origin: 100% 50%; }
.join__field:focus-within .join__line { scale: 0.35 1; }
.join__field:has(.join__input:not(:placeholder-shown)) .join__line { scale: 0.75 1; }
.join[data-state="ok"] .join__line { scale: 1 1; }
.join[data-state="bad"] .join__line { scale: 1 1; background: #ff7a5c; }
.join[data-state="busy"] .join__btn { opacity: 0.6; pointer-events: none; }
.join__msg { min-height: 1.4em; margin: 0.75rem 0 0; font-size: var(--step-small); font-weight: 600; color: var(--accent); }
.join[data-state="bad"] .join__msg { color: #ff7a5c; }
.join__fine { margin: 0.25rem 0 0; font-size: 0.75rem; color: #8a8576; }
.join.is-shake .join__field { animation: join-shake 420ms var(--ease-out); }
@keyframes join-ping { 0% { box-shadow: 0 0 0 0 rgba(224,190,133,0.6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(224,190,133,0); } }
@keyframes join-blink { 50% { opacity: 0; } }
@keyframes join-shake { 20% { translate: -6px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }
@media (max-width: 860px) {
.join { grid-template-columns: 1fr; padding-bottom: 2.25rem; }
.join__btn span { display: none; }
.join__btn { padding: 0 0.95rem; }
}
/* ---------- rules, held scene v2: the art fills the screen, the word sits low on the start side, a giant outlined number on the end side, four framed chapters with progress along the bottom ---------- */
.rules__eyebrow, .rules__skip, .rules__num, .rule__k { display: none; }
.rules.is-live .rules__stage { display: block; padding: 0; }
.rules.is-live .rules__stage::before { display: none; }
.rules.is-live .rules__pics { position: absolute; inset: 0; height: auto; clip-path: none; z-index: -1; }
.rules.is-live .rules__pics::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.72) 42%, rgba(0,0,0,0.25) 100%), linear-gradient(to top, #000000 0%, rgba(0,0,0,0) 38%), linear-gradient(to bottom, #000000 0%, rgba(0,0,0,0) 18%); } /* reading side taste-skill-ignore */
:root[dir="rtl"] .rules.is-live .rules__pics::after { background: linear-gradient(270deg, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.72) 42%, rgba(0,0,0,0.25) 100%), linear-gradient(to top, #000000 0%, rgba(0,0,0,0) 38%), linear-gradient(to bottom, #000000 0%, rgba(0,0,0,0) 18%); } /* taste-skill-ignore */
.rules.is-live .rules__pic { object-position: 65% 40%; filter: saturate(0.9) brightness(0.85); }
.rules.is-live .rules__list { position: absolute; inset-inline: var(--margin); top: 9rem; bottom: 11rem; height: auto; width: auto; max-width: 62rem; }
.rules.is-live .rule { inset-inline: 0; bottom: 0; }
.rules.is-live .rule__k { display: block; margin: 0 0 0.75rem; font-size: 0.75rem; letter-spacing: 0.18em; color: var(--accent); }
.rules.is-live .rule__word { font-size: min(11vw, 22svh, 11rem); line-height: 0.92; }
.rules.is-live .rule__line { max-width: 34ch; margin-top: 1.1rem; }
.rules.is-live .rules__eyebrow { display: inline-flex; position: absolute; top: 6.5rem; inset-inline-start: var(--margin); margin: 0; }
.rules.is-live .rules__skip { display: inline-flex; align-items: center; gap: 0.35rem; position: absolute; top: 6.5rem; inset-inline-end: var(--margin); font-size: 0.75rem; font-weight: 600; text-decoration: none; color: var(--muted); transition: color var(--t-hover) ease; }
:root[dir="rtl"] .rules__skip .ico { scale: -1 1; }
@media (hover: hover) and (pointer: fine) { .rules__skip:hover { color: var(--accent); } }
.rules.is-live .rules__num { display: block; position: absolute; inset-inline-end: calc(var(--margin) + 1rem); top: 50%; translate: 0 -55%; font-family: var(--font-display); font-size: min(38svh, 24vw); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(208,197,154,0.4); pointer-events: none; }
.rules.is-live .rules__rail { position: absolute; inset-inline: var(--margin); bottom: 2rem; margin: 0; grid-column: auto; grid-row: auto; }
.rules.is-live .rules__rail li { background: rgba(11,11,10,0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.rules.is-live .rules__rail li.is-on { background: var(--accent); }
.rules__bar { display: none; }
.rules.is-live .rules__bar { display: block; order: 9; height: 2px; margin-top: 0.55rem; background: rgba(240,240,240,0.14); overflow: clip; }
.rules__bar i { display: block; height: 100%; background: var(--accent); scale: var(--fill, 0) 1; transform-origin: 0 50%; }
:root[dir="rtl"] .rules__bar i { transform-origin: 100% 50%; }
.rules__rail li.is-on .rules__bar { background: rgba(23,23,23,0.2); }
.rules__rail li.is-on .rules__bar i { background: var(--accent-ink); }
/* ---------- section eyebrows: a short gold rule, the section number, its name ---------- */
.eyebrow { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 1.25rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.eyebrow i, .rules__eyebrow i { width: 1.6rem; height: 1px; background: var(--accent); }
.eyebrow .nums, .rules__eyebrow .nums { color: var(--accent); }
.rules__eyebrow { align-items: center; gap: 0.6rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
:root[lang="ar"] .eyebrow, :root[lang="ar"] .rules__eyebrow { letter-spacing: 0; font-size: var(--step-small); }
/* ---------- ticker: the yard's three rules on a gold strip, always moving ---------- */
.ticker { position: relative; z-index: 1; overflow: clip; background: var(--accent); color: var(--accent-ink); }
.ticker__track { display: flex; width: max-content; }
.ticker__run { display: flex; align-items: center; flex: none; }
.ticker span { padding: 0.85rem 1.6rem; font-family: var(--font-display); font-size: clamp(1.25rem, 0.9rem + 1vw, 1.9rem); line-height: 1; text-transform: uppercase; white-space: nowrap; }
.ticker .ticker__s { font-family: var(--font-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; }
:root[lang="ar"] .ticker span { font-family: "Noto Kufi Arabic", var(--font-display); font-weight: 800; font-size: clamp(1.05rem, 0.8rem + 0.8vw, 1.5rem); letter-spacing: 0; }
.ticker i { font-style: normal; font-weight: 300; opacity: 0.55; }
@media (prefers-reduced-motion: no-preference) {
.ticker__track { animation: ticker 38s linear infinite; }
:root[dir="rtl"] .ticker__track { animation-name: ticker-rtl; }
.ticker:hover .ticker__track { animation-play-state: paused; }
}
@keyframes ticker { to { translate: -50% 0; } }
@keyframes ticker-rtl { to { translate: 50% 0; } }
/* ---------- back to top ---------- */
.totop { position: fixed; z-index: 30; inset-inline-end: 1.1rem; bottom: 1.1rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; color: var(--ink); background: rgba(10,10,10,0.75); box-shadow: inset 0 0 0 1px rgba(240,240,240,0.3); opacity: 0; translate: 0 10px; pointer-events: none; transition: opacity 300ms ease, translate 400ms var(--ease-expo), box-shadow 240ms ease, color 240ms ease; }
.totop.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
.totop .ico { width: 1rem; height: 1rem; }
@media (hover: hover) and (pointer: fine) { .totop:hover { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } }
@media (max-width: 860px) { .totop { display: none; } }
/* ---------- beyond the duel: four framed cards to the media pages ---------- */
.more { padding-top: var(--section); padding-bottom: var(--section); }
.more__grid { gap: 1rem; }
.more__card { padding: 0.9rem 0.9rem 1.5rem; gap: 0.5rem; }
.more__img { margin-bottom: 1.1rem; }
.more__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem 3rem; margin-bottom: 3rem; }
.more__lead { max-width: 30ch; color: var(--muted); }
.more__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.more__card { display: grid; gap: 0.4rem; padding: 0.75rem 0.75rem 1.25rem; text-decoration: none; color: var(--ink); }
.more__img { display: block; aspect-ratio: 4 / 3; overflow: clip; margin-bottom: 0.9rem; background: #141414; }
.more__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.6) brightness(0.8); transition: transform 900ms var(--ease-expo), filter 500ms ease; }
.more__img--mark { display: grid; place-items: center; background: #101010; }
.more__img--mark img { width: 34%; height: auto; object-fit: contain; filter: none; }
.more__k { padding-inline: 0.5rem; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
:root[lang="ar"] .more__k { letter-spacing: 0; font-size: 0.8125rem; }
.more__t { padding-inline: 0.5rem; font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); line-height: 1.05; text-transform: uppercase; }
:root[lang="ar"] .more__t { font-family: "Noto Kufi Arabic", var(--font-display); font-weight: 800; line-height: 1.4; }
.more__d { padding-inline: 0.5rem; font-size: var(--step-small); color: var(--muted); }
.more__go { position: absolute; inset-inline-end: 1.1rem; bottom: 1.1rem; font-size: 1.1rem; color: var(--accent); transition: translate 420ms var(--ease-expo); }
:root[dir="rtl"] .more__go { scale: -1 1; }
@media (hover: hover) and (pointer: fine) {
.more__card:hover .more__img img { transform: scale(1.06); filter: none; }
.more__card:hover .more__go { translate: 3px -3px; }
.more__card:hover .more__t { color: var(--accent); }
}
@media (max-width: 1100px) { .more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .more__grid { grid-template-columns: 1fr; } }
/* narrow bars: the wishlist button says less so the centred mark keeps its space */
.bar__action-short { display: none; }
@media (max-width: 600px) {
.bar__action-long { display: none; }
.bar__action-short { display: inline; }
}
/* ---------- hero grain: a fine film grain over the footage, a touch stronger than the page's own ---------- */
.hero__grain { position: absolute; inset: -60%; z-index: -1; pointer-events: none; opacity: 0.16; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,"); } /* grain taste-skill-ignore */
@media (prefers-reduced-motion: no-preference) { .hero__grain { animation: hero-grain 0.6s steps(6) infinite; } }
@keyframes hero-grain { 0% { translate: 0 0; } 17% { translate: -4% 3%; } 33% { translate: 3% -5%; } 50% { translate: -6% -2%; } 67% { translate: 5% 4%; } 83% { translate: -2% 6%; } 100% { translate: 0 0; } }
/* ---------- duel v2: a match HUD. glass panel with corner brackets, a reticle behind the call, signal lights, tags on the faces ---------- */
.duel__center.frame { clip-path: none; background: rgba(8,8,8,0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 1.1rem 2rem 2.25rem; gap: 0.9rem; }
.duel__top { align-self: stretch; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: 0.9rem; margin-bottom: 0.6rem; box-shadow: inset 0 -1px 0 rgba(208,197,154,0.18); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
:root[lang="ar"] .duel__top { letter-spacing: 0; font-size: 0.8125rem; }
.duel__lights { display: inline-flex; gap: 4px; }
.duel__lights i { width: 18px; height: 4px; background: rgba(240,240,240,0.18); transition: background-color 160ms ease; }
.duel__reticle { position: absolute; left: 50%; top: 9.5rem; width: min(17rem, 70%); translate: -50% -50%; z-index: -1; fill: none; stroke: rgba(208,197,154,0.28); stroke-width: 1; pointer-events: none; transition: stroke 200ms ease, scale 400ms var(--ease-expo); }
.duel__reticle .r2 { stroke-dasharray: 4 7; }
.duel__reticle .r3 { stroke: var(--accent); stroke-width: 2; }
.duel__mark { width: 2.75rem; }
.duel__status { font-size: clamp(3rem, 2rem + 3.4vw, 5.5rem); line-height: 0.95; }
.duel__line { font-family: var(--font-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.5; }
:root[lang="ar"] .duel__line { font-family: "Noto Kufi Arabic", var(--font-text); letter-spacing: 0; font-size: var(--step-small); }
.duel__start { font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase; min-height: 3.5rem; }
:root[lang="ar"] .duel__start { letter-spacing: 0; font-size: var(--step-body); }
.duel__best { font-size: 0.75rem; letter-spacing: 0.08em; }
/* face tags */
.duel__face figcaption { top: 1.5rem; bottom: auto; inset-inline: 1.5rem; padding: 0; background: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.duel__face--you figcaption { justify-content: flex-end; }
:root[lang="ar"] .duel__face figcaption { letter-spacing: 0; font-size: var(--step-small); }
.duel__tag { padding: 0.3rem 0.5rem; box-shadow: inset 0 0 0 1px rgba(208,197,154,0.45); color: var(--accent); font-size: 0.625rem; letter-spacing: 0.14em; }
.duel__ms { flex-basis: 100%; font-family: var(--font-display); font-size: 2.25rem; font-weight: 400; letter-spacing: 0; color: var(--ink); min-height: 1em; }
.duel__face--you .duel__ms { text-align: end; }
/* the faces carry a faint scan and vignette */
.duel__face::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.18) 2px 3px), radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%); } /* scan lines taste-skill-ignore */
/* states */
@media (prefers-reduced-motion: no-preference) {
.duel__reticle { animation: reticle-spin 40s linear infinite; }
.duel[data-state="wait"] .duel__reticle { animation-duration: 8s; }
.duel[data-state="wait"] .duel__lights i { animation: duel-light 1.2s steps(1) infinite; }
.duel[data-state="wait"] .duel__lights i:nth-child(2) { animation-delay: 0.4s; }
.duel[data-state="wait"] .duel__lights i:nth-child(3) { animation-delay: 0.8s; }
}
.duel[data-state="wait"] .duel__reticle { stroke: rgba(240,240,240,0.5); scale: 0.9; }
.duel[data-state="draw"] .duel__lights i { background: var(--accent-ink); }
.duel[data-state="draw"] .duel__top { color: var(--accent-ink); box-shadow: inset 0 -1px 0 rgba(23,23,23,0.3); }
.duel[data-state="draw"] .duel__reticle { stroke: rgba(23,23,23,0.45); scale: 0.78; }
.duel[data-state="draw"] .duel__center.frame { background: var(--accent); border-color: var(--accent); }
.duel[data-state="draw"] .duel__center.frame::before, .duel[data-state="draw"] .duel__center.frame::after { opacity: 0; }
.duel[data-state="win"] .duel__lights i, .duel[data-state="spare"] .duel__lights i, .duel[data-state="end"] .duel__lights i { background: var(--accent); }
.duel[data-state="lose"] .duel__lights i, .duel[data-state="early"] .duel__lights i { background: #ff7a5c; }
@keyframes reticle-spin { to { rotate: 360deg; } }
@keyframes duel-light { 0% { background: var(--accent); } 33% { background: rgba(240,240,240,0.18); } }
@media (max-width: 860px) {
.duel__center.frame { padding: 1rem 1.25rem 2rem; }
.duel__reticle { top: 8rem; }
.duel__face figcaption { display: flex; top: 1rem; inset-inline: 1rem; }
.duel__ms { font-size: 1.6rem; }
}
/* ---------- duel v3: the call on the start side, the playable panel on the end side ---------- */
.duel__wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem clamp(2rem, 5vw, 6rem); align-items: center; }
.duel .duel__head { display: block; }
.gold { color: var(--accent); }
.duel .duel__intro { margin-top: 2.25rem; max-width: 40ch; font-size: var(--step-body); line-height: 1.7; color: #d6d0bd; }
.duel__try { margin: 1.75rem 0 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
:root[lang="ar"] .duel__try { letter-spacing: 0; font-size: var(--step-small); }
.duel .duel__stage { margin: 0; display: block; min-height: 0; background: none; }
.duel .duel__center { margin: 0; clip-path: none; min-height: 36rem; justify-content: flex-start; gap: 0.85rem; padding: 1.3rem 2rem 1.3rem; border: 1px solid rgba(208,197,154,0.22);
background: radial-gradient(55% 45% at 50% 32%, rgba(224,190,133,0.09), rgba(224,190,133,0) 70%), #0d0d0c; } /* lamp light in the panel taste-skill-ignore */
.duel__plus { position: absolute; font-size: 1.15rem; line-height: 1; color: var(--accent); pointer-events: none; }
.duel__plus--a { top: -0.62rem; inset-inline-start: -0.38rem; }
.duel__plus--b { bottom: -0.62rem; inset-inline-end: -0.38rem; }
.duel .duel__top { margin-bottom: 1.25rem; }
.duel .duel__reticle { top: 11rem; width: min(18rem, 64%); }
.duel .duel__mark { width: 4.25rem; filter: drop-shadow(0 0 22px rgba(224,190,133,0.4)); } /* glow taste-skill-ignore */
.duel .duel__status { font-size: clamp(2.6rem, 1.8rem + 2.6vw, 4.5rem); }
.duel .duel__sub { min-height: 2.6em; }
.duel .duel__controls { margin-top: 0.25rem; }
.duel .duel__choice { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; width: min(100%, 30rem); }
.duel__pick.duel__pick--spare, .duel__pick.duel__pick--end { clip-path: none; display: flex; justify-content: space-between; align-items: center; min-width: 0; min-height: 4rem; padding: 0 1.1rem; background: rgba(255,255,255,0.02); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(208,197,154,0.45); font-family: var(--font-display); font-size: 1.6rem; text-transform: uppercase; transition: background-color 220ms ease, color 220ms ease, box-shadow 220ms ease; }
.duel__pick i { font-style: normal; font-family: var(--font-text); font-size: 0.9rem; color: var(--muted); transition: color 220ms ease, translate 360ms var(--ease-expo); }
@media (hover: hover) and (pointer: fine) {
.duel__pick.duel__pick--spare:hover { background: var(--ink); color: var(--accent-ink); box-shadow: none; }
.duel__pick.duel__pick--end:hover { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.duel__pick:hover i { color: var(--accent-ink); translate: 2px -2px; }
}
.duel__score { margin-top: auto; align-self: stretch; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1rem; box-shadow: inset 0 1px 0 rgba(208,197,154,0.18); }
.duel__slot { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.duel__slot img { width: 2.9rem; height: 2.9rem; object-fit: cover; object-position: 50% 22%; clip-path: var(--chamfer); transition: filter 300ms ease; }
.duel__slot > span:not(.duel__ms) { display: grid; gap: 0.1rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.duel__slot--you > span:not(.duel__ms) { text-align: end; }
.duel__slot b { font-size: 0.625rem; letter-spacing: 0.16em; color: var(--accent); font-weight: 700; }
.duel__slot .duel__ms { flex-basis: auto; font-size: 1.5rem; min-width: 4.5ch; }
.duel__slot--him .duel__ms { text-align: start; }
.duel__slot--you .duel__ms { text-align: end; }
.duel__vs { font-family: var(--font-display); font-size: 1.1rem; color: var(--muted); }
:root[lang="ar"] .duel__slot > span:not(.duel__ms) { letter-spacing: 0; font-size: var(--step-small); }
/* states on the panel */
.duel[data-state="draw"] .duel__stage { background: none; }
.duel[data-state="draw"] .duel__center { border-color: var(--accent); }
.duel[data-state="draw"] .duel__score { box-shadow: inset 0 1px 0 rgba(23,23,23,0.3); }
.duel[data-state="draw"] .duel__slot b, .duel[data-state="draw"] .duel__vs, .duel[data-state="draw"] .duel__plus { color: var(--accent-ink); }
.duel[data-state="draw"] .duel__mark { filter: none; }
.duel[data-state="win"] .duel__slot--him img, .duel[data-state="spare"] .duel__slot--him img { filter: grayscale(1) brightness(0.5); }
.duel[data-state="lose"] .duel__slot--you img, .duel[data-state="early"] .duel__slot--you img { filter: grayscale(1) brightness(0.5); }
.duel[data-state="end"] .duel__slot--him img { filter: brightness(0.15); }
@media (max-width: 960px) {
.duel__wrap { grid-template-columns: 1fr; }
.duel .duel__center { min-height: 0; padding: 1.1rem 1.1rem 1.1rem; }
.duel .duel__reticle { top: 9.5rem; }
.duel__slot .duel__ms { font-size: 1.2rem; }
.duel__slot > span:not(.duel__ms) b + span { display: none; }
}
/* the hero grain, a little stronger so it reads as film */
.hero__grain { opacity: 0.24; }
.duel .duel__controls { align-self: stretch; }
.duel .duel__controls [hidden], .duel .duel__choice[hidden] { display: none; }
/* menu button, simplified: the word and two lines, no frame */
.bar__menu { padding: 0 0.25rem; gap: 0.6rem; color: var(--ink); }
.bar__menu::before, .bar__menu::after { display: none; }
.bar__menu-icon { width: 18px; height: 0; background: none; }
.bar__menu-icon::before { top: -4px; }
.bar__menu-icon::after { top: 3px; }
.bar.is-open .bar__menu { color: var(--accent); }
.bar.is-open .bar__menu-icon::before, .bar.is-open .bar__menu-icon::after { top: 0; }
@media (hover: hover) and (pointer: fine) { .bar__menu:hover { color: var(--accent); } }
/* ---------- yard map: the in-game capture in a HUD frame, markers on the ground, a legend beside it ---------- */
.ymap { margin-top: 4rem; }
.ymap__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0 0 0.9rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.ymap__bar > span:first-child { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); }
.ymap__bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .ymap__bar i { animation: join-ping 2.2s var(--ease-out) infinite; } }
:root[lang="ar"] .ymap__bar { letter-spacing: 0; font-size: 0.8125rem; }
.ymap__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: 1rem; }
.ymap__view { align-self: start; position: relative; overflow: clip; border: 1px solid rgba(208,197,154,0.22); background: #0b0b0b; }
.ymap__view img { display: block; width: 100%; height: auto; filter: brightness(0.9) contrast(1.05); transition: filter 400ms ease; }
.ymap.has-on .ymap__view img { filter: brightness(0.62) contrast(1.05); }
.ymap__scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.16) 2px 3px), radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%); } /* scan lines taste-skill-ignore */
.ymap__pin { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; z-index: 1; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; color: var(--accent-ink); }
:root[dir="rtl"] .ymap__pin { left: var(--x); }
.ymap__pin i { position: absolute; inset: 0; background: var(--accent); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transition: scale 360ms var(--ease-expo); }
.ymap__pin::before { content: ""; position: absolute; inset: -0.5rem; border: 1px solid rgba(224,190,133,0.7); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .ymap__pin::before { animation: pin-ring 2.4s var(--ease-out) infinite; } .ymap__pin:nth-of-type(2)::before { animation-delay: 0.4s; } .ymap__pin:nth-of-type(3)::before { animation-delay: 0.8s; } .ymap__pin:nth-of-type(4)::before { animation-delay: 1.2s; } .ymap__pin:nth-of-type(5)::before { animation-delay: 1.6s; } }
.ymap__pin .nums { position: relative; font-size: 0.625rem; font-weight: 800; }
.ymap__tip { position: absolute; left: 50%; bottom: calc(100% + 0.6rem); translate: -50% 4px; padding: 0.4rem 0.65rem; background: rgba(8,8,8,0.88); box-shadow: inset 0 0 0 1px rgba(208,197,154,0.4); color: var(--ink); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 220ms ease, translate 360ms var(--ease-expo); }
:root[lang="ar"] .ymap__tip { letter-spacing: 0; font-size: 0.8125rem; }
.ymap__pin.is-on i { scale: 1.25; }
.ymap__pin.is-on .ymap__tip { opacity: 1; translate: -50% 0; }
.ymap__list { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 0; border-top: 1px solid #262626; }
.ymap__list button { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 0.75rem; row-gap: 0.15rem; width: 100%; padding: 1rem 0.25rem; text-align: start; border-bottom: 1px solid #262626; color: var(--ink); transition: background-color 220ms ease, padding 360ms var(--ease-expo); }
.ymap__list .nums { grid-row: span 2; font-size: 0.75rem; letter-spacing: 0.12em; color: var(--accent); padding-top: 0.2rem; }
.ymap__list b { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; line-height: 1.1; text-transform: uppercase; }
:root[lang="ar"] .ymap__list b { font-family: "Noto Kufi Arabic", var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1.5; }
.ymap__list span:not(.nums) { font-size: var(--step-small); color: var(--muted); }
.ymap__list button.is-on { background: rgba(224,190,133,0.08); padding-inline-start: 0.75rem; }
.ymap__list button.is-on b { color: var(--accent); }
@keyframes pin-ring { 0% { opacity: 0.9; scale: 0.8; } 100% { opacity: 0; scale: 1.6; } }
@media (max-width: 960px) {
.ymap__body { grid-template-columns: 1fr; }
.ymap__pin { width: 1.6rem; height: 1.6rem; }
.ymap__bar .nums { display: none; }
}