/* ============================================================================= Circle of Kurds · the intro overlay ("An entrance through the star") Owner: intro agent. Pairs with js/intro.js and the markup in intro.snippet.html. #intro only exists visually while has .intro-active. The gate script in adds that class before first paint (and only when the intro should play), so the homepage never flashes, and with JS off the homepage is simply visible. This file sets the resting geometry. Everything that moves is driven by js/intro.js with transform / opacity; only the star-shaped opening redraws (its three SVG paths share one outline, recomputed each frame on its own layer). ========================================================================== */ .intro { display: none; } html.intro-active .intro { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; overflow: hidden; background: #fff; color: #151515; contain: strict; will-change: transform; /* own compositor layer: the page underneath is never repainted */ touch-action: none; /* no page panning behind the overlay */ -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Failsafe: if js/intro.js never takes over (blocked, 404, crashed before starting) get out of the way after 9s. intro.js cancels it with .is-live. */ animation: intro-failsafe 0.6s ease 9s forwards; } html.intro-active .intro.is-live { animation: none; } @keyframes intro-failsafe { to { opacity: 0; visibility: hidden; } } /* "Into the star": the overlay's own white hands over to the cover with the star-shaped hole (drawn in .intro__cover). */ html.intro-active .intro.is-opening { background: transparent; } /* ---- The lockup: "Circle of ✦ Kurds" -------------------------------------- */ .intro__lockup { position: absolute; left: 0; right: 0; top: 49.5%; /* a hair above centre: optical centre */ height: 0; /* a centre line; items overflow it evenly */ display: flex; align-items: center; justify-content: center; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: clamp(30px, 4.1vw, 60px); font-weight: 500; line-height: 1; /* Inter's cap-height middle sits on the line-box centre */ letter-spacing: -0.006em; white-space: nowrap; --frame-h: 4.6em; /* the video frame, 150:184 */ } .intro__word { display: block; flex: none; opacity: 0; will-change: transform, opacity; } .intro__word--kurds { font-weight: 600; } /* The star's slot in the row. Nothing inside it affects layout. */ .intro__mark { position: relative; flex: none; width: 1.175em; /* 64 / 76.8 × 1.41em */ height: 1.41em; margin: 0 0.48em; } /* The portrait frame that the star opens into. Revealed from its centre with clip-path (set per frame by js/intro.js); the video inside is never scaled. */ .intro__frame { position: absolute; left: 50%; top: 50%; width: calc(var(--frame-h) * 150 / 184); height: var(--frame-h); margin-left: calc(var(--frame-h) * -75 / 184); margin-top: calc(var(--frame-h) / -2); overflow: hidden; background: #e9e6e1; visibility: hidden; clip-path: inset(50%); -webkit-clip-path: inset(50%); } .intro__frame-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .intro__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; /* keep the lit peak and the clouds */ background: #e9e6e1; } .intro__star, .intro__corner { position: absolute; left: 50%; top: 50%; display: block; overflow: visible; fill: #d7a629; pointer-events: none; } .intro__star { width: 1.175em; height: 1.41em; margin: -0.705em 0 0 -0.5875em; opacity: 0; transform: scale(0.6); } /* Four small copies of the star that sit on the frame's corners (keyframe 01). */ .intro__corner { --corner-h: calc(var(--frame-h) * 0.085); width: calc(var(--corner-h) * 0.83333); height: var(--corner-h); margin-top: calc(var(--corner-h) / -2); margin-left: calc(var(--corner-h) * -0.416667); visibility: hidden; transform: scale(0); } /* ---- Into the star: white cover with a star-shaped hole ------------------- */ .intro__cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; overflow: visible; pointer-events: none; will-change: transform; /* its own layer: redrawn each frame, nothing else is */ } .intro.is-opening .intro__cover { display: block; } .intro__cover-fill { fill: #fff; } .intro__cover-star { fill: #d7a629; } .intro__cover-edge { fill: none; stroke: #d7a629; stroke-width: 2px; stroke-linejoin: round; } /* ---- Skip intro ↗ ---------------------------------------------------------- */ .intro__skip { position: absolute; right: 12px; /* + padding: the label sits 24px in from the corner */ bottom: 8px; z-index: 2; margin: 0; padding: 16px 12px; /* 44px tall touch target */ border: 0; border-radius: 6px; background: none; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 12px; letter-spacing: 0; color: #6b6b6b; cursor: pointer; opacity: 0; transition: color 0.2s ease-out; } .intro__skip span { display: inline-block; margin-left: 0.28em; /* the word space, kept out of the accessible name */ transition: transform 0.2s ease-out; } .intro__skip:hover { color: #151515; } .intro__skip:hover span { transform: translate(1px, -1px); } .intro__skip:focus { outline: none; } .intro__skip:focus-visible { outline: 2px solid #151515; outline-offset: -4px; } /* ---- Small screens: same choreography, sizes from DESIGN.md §4 ------------ */ @media (max-width: 767px) { .intro__lockup { font-size: clamp(26px, 7.8vw, 34px); /* 30.4px at 390, 33.5px at 430 */ --frame-h: 4.2em; } }