/*
Theme Name:  The Dawn
Theme URI:   https://example.com/the-dawn
Author:      THE DAWN
Author URI:  https://example.com
Description: Private audiovisual theme. A domain-warped WebGL field, sub-bass impacts and scroll-triggered ruptures, held inside a deliberately plain typographic system. No page builder, no third-party request.
Version:     4.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: the-dawn
Tags:        one-column, custom-menu, custom-logo, featured-images, translation-ready, dark-mode
*/

/* ==========================================================================
   THE RULE OF THIS FILE

   The chaos lives in the canvas. The page on top of it does not compete:
   one type scale, one button, one card, one way of holding black behind
   text. No glow on anything that is not deliberately glowing, and no
   text-shadow used as a substitute for a background — an earlier version
   stacked black halos under every small label to make it legible over the
   field, and it looked exactly as dirty as it sounds. Legibility is a
   .td-plate, not a shadow.

   1. Tokens
   2. Base
   3. Gate
   4. Ambience
   5. Ruptures
   6. Type
   7. Plate & button
   8. Masthead
   9. Hero
   10. Films
   11. Footer
   12. Single & archive
   13. Utilities
   14. Responsive
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
	--void:  #000000;
	--ink:   #f5f5f7;
	--dim:   #a1a1a6;
	--faint: #6e6e73;
	--line:  rgba(245, 245, 247, 0.12);

	--magenta: #ff0090;
	--cyan:    #00e5ff;

	/* Two families. Display for the three words that are meant to be
	   enormous; the platform UI face for absolutely everything else. */
	--display: "Helvetica Neue", "Arial Narrow", Inter, system-ui, sans-serif;
	--ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--mega: clamp(3.6rem, 15.5vw, 17rem);
	--h1:   clamp(2.4rem, 7vw, 6rem);
	--h2:   clamp(1.8rem, 5vw, 4rem);
	--body: 1.0625rem;
	--meta: 0.75rem;

	--s1: 0.5rem;
	--s2: 1rem;
	--s3: 2rem;
	--s4: 4rem;
	--s5: clamp(6rem, 14vw, 12rem);

	--wrap: min(1440px, 92vw);

	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--flicker-period: 55ms;
	--hue: 0deg;
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	background: var(--void);
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	color: var(--ink);
	font-family: var(--ui);
	font-size: var(--body);
	line-height: 1.5;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.td-locked { overflow: hidden; }

img, video, svg, iframe, canvas { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

::selection { background: var(--magenta); color: var(--void); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: #2a2a2e; }


/* ==========================================================================
   3. GATE
   ========================================================================== */

/* Hidden unless JS is confirmed running — see the boot script. A blocking
   overlay must never depend on a script in order to be dismissed. */
.td-gate { display: none; }

.td-js .td-gate {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: var(--s3) 6vw;
	background: var(--void);
	transition: opacity 0.8s var(--ease);
}

.td-js .td-gate[hidden] { display: none; }
.td-gate.is-leaving { opacity: 0; pointer-events: none; }

.td-gate__panel {
	width: 100%;
	max-width: 32rem;
	text-align: center;
	animation: td-in 0.9s var(--ease) both;
}

.td-gate__title {
	margin: 0 0 1.25rem;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	font-weight: 600;
	letter-spacing: -0.022em;
	line-height: 1.12;
}

.td-gate__lead {
	margin: 0 0 0.75rem;
	color: var(--dim);
	line-height: 1.5;
	text-wrap: pretty;
}

.td-gate__lead--fr { color: var(--faint); font-size: 0.9375rem; }

.td-gate__note {
	margin: 1.75rem 0 2.25rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--line);
	font-size: 0.875rem;
	color: var(--faint);
}

.td-gate__note span,
.td-gate__fine span { display: block; }

.td-gate__fine {
	margin: 1.25rem 0 0;
	font-size: 0.75rem;
	color: #48484a;
}


/* ==========================================================================
   4. AMBIENCE
   ========================================================================== */

#td-canvas {
	position: fixed;
	inset: 0;
	z-index: -3;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
	transition: opacity 2.5s var(--ease);
}

body.td-entered #td-canvas { opacity: 1; }

/* One vignette, doing one job: pulling the corners down so the field
   reads as a tunnel rather than wallpaper. It also carries the hue drift
   and the CSS-only fallback tint if WebGL is unavailable. */
.td-vignette {
	position: fixed;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background:
		radial-gradient(ellipse 72% 64% at 50% 46%, transparent 0%, rgba(0, 0, 0, 0.30) 62%, rgba(0, 0, 0, 0.62) 100%),
		radial-gradient(60vw 60vw at 15% 10%, rgba(255, 0, 144, 0.10), transparent 60%),
		radial-gradient(60vw 60vw at 85% 90%, rgba(122, 0, 255, 0.10), transparent 60%);
	filter: hue-rotate(var(--hue));
	transition: filter 1.4s linear;
}

.td-grain {
	position: fixed;
	inset: 0;
	z-index: 900;
	pointer-events: none;
	opacity: 0.06;
	mix-blend-mode: overlay;
}


/* ==========================================================================
   5. RUPTURES

   Full-screen strobe rate is set by STROBE_HZ in assets/js/the-dawn.js —
   one constant, one place. Everything here just renders what it asks for.
   ========================================================================== */

.td-strobe {
	position: fixed;
	inset: 0;
	z-index: 950;
	pointer-events: none;
	background: #fff;
	opacity: 0;
}

/* The word that surfaces out of the field for a few frames. */
.td-word {
	position: fixed;
	inset: 0;
	z-index: 940;
	display: grid;
	place-items: center;
	pointer-events: none;
	opacity: 0;
	font-family: var(--display);
	font-size: clamp(4rem, 26vw, 26rem);
	font-weight: 800;
	letter-spacing: -0.06em;
	color: #fff;
	mix-blend-mode: difference;
	transform: scale(1.35);
}

.td-word.is-on {
	opacity: 1;
	transform: scale(1);
	transition: transform 0.38s cubic-bezier(0.2, 0, 0, 1);
}

/* Fast small-area flicker. Type only — never the backdrop. */
.is-flickering { animation: td-flicker var(--flicker-period) steps(1, end) infinite; }

@keyframes td-flicker {
	0%, 45%   { opacity: 1; }
	46%, 100% { opacity: 0.04; filter: invert(1); }
}

/* Shake the content, never the fixed layers: shaking the backdrop looks
   like a bug, shaking the page looks like an impact. */
.td-shake-hard #main, .td-shake-hard .td-foot { animation: td-shake-hard 0.05s linear infinite; }
.td-shake-soft #main, .td-shake-soft .td-foot { animation: td-shake-soft 0.1s linear infinite; }

@keyframes td-shake-hard {
	0%   { transform: translate(0, 0) skewX(0deg); }
	20%  { transform: translate(-18px, 8px) skewX(1.6deg); }
	40%  { transform: translate(14px, -12px) skewX(-2deg); }
	60%  { transform: translate(-10px, -6px) skewX(1deg); }
	80%  { transform: translate(16px, 9px) skewX(-1.3deg); }
	100% { transform: translate(0, 0) skewX(0deg); }
}

@keyframes td-shake-soft {
	0%   { transform: translate(0, 0); }
	33%  { transform: translate(-5px, 3px); }
	66%  { transform: translate(4px, -4px); }
	100% { transform: translate(0, 0); }
}

/* The drop. Held black, not flashed — holding it is what makes the
   return violent. */
.td-black #td-canvas,
.td-black .td-vignette,
.td-black #main,
.td-black .td-foot { opacity: 0 !important; transition: opacity 0.05s linear; }


/* ==========================================================================
   6. TYPE
   ========================================================================== */

.td-title, .td-h1, .td-h2, .td-sig__name {
	font-family: var(--display);
	font-weight: 800;
	line-height: 0.86;
	letter-spacing: -0.05em;
	text-transform: uppercase;
	margin: 0;
	color: #fff;
}

.td-title { font-size: var(--mega); letter-spacing: -0.06em; }
.td-h1 { font-size: var(--h1); }
.td-h2 { font-size: var(--h2); }

/* The one small-text style in the theme: uppercase, tracked, dim. Used
   for kickers, credits and countdown labels, and nowhere else. */
.td-meta,
.td-count__l,
.td-card__link,
.td-social span,
.td-credit,
.td-date {
	font-size: var(--meta);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--faint);
	margin: 0;
}

.td-letter { display: inline-block; }
.td-space { display: inline-block; width: 0.22em; }


/* ==========================================================================
   7. PLATE & BUTTON
   ========================================================================== */

/* The plate is how text stays readable over the field: a soft pool of
   black that belongs to the block and travels with it. This replaces
   every text-shadow halo the theme used to carry. */
.td-plate { position: relative; }

.td-plate::before {
	content: "";
	position: absolute;
	inset: -16% -8%;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(
		ellipse at center,
		rgba(0, 0, 0, 0.80) 0%,
		rgba(0, 0, 0, 0.62) 46%,
		rgba(0, 0, 0, 0.22) 72%,
		transparent 90%
	);
}

.td-plate--tight::before { inset: -70% -6%; }

/* One button, everywhere: the gate's pill. */
.td-btn {
	appearance: none;
	display: inline-block;
	border: 0;
	border-radius: 980px;
	padding: 0.8rem 2.5rem;
	font-family: var(--ui);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--void);
	background: var(--ink);
	cursor: pointer;
	transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}

.td-btn:hover { background: #fff; }
.td-btn:active { transform: scale(0.97); }

.td-btn--ghost {
	background: transparent;
	color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--line);
}

.td-btn--ghost:hover { background: rgba(245, 245, 247, 0.08); }

.td-wrap { width: var(--wrap); margin-inline: auto; }


/* ==========================================================================
   8. MASTHEAD
   ========================================================================== */

.td-head {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	padding: var(--s2) 4vw;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
	transition: transform 0.5s var(--ease);
}

.td-head.is-hidden { transform: translateY(-110%); }

.td-head__name {
	font-size: var(--meta);
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.custom-logo { width: auto; max-height: 32px; }

.td-nav ul {
	display: flex;
	gap: var(--s3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.td-nav a {
	font-size: var(--meta);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--faint);
	transition: color 0.25s var(--ease);
}

.td-nav a:hover { color: var(--ink); }


/* ==========================================================================
   9. HERO
   ========================================================================== */

.td-hero {
	position: relative;
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding: calc(var(--s5) * 0.7) 4vw var(--s5);
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}

/* The bleed: a red sheet descending behind the title. The only saturated
   red in the theme, and it never flashes. */
.td-hero__bleed {
	position: absolute;
	inset: -40% 0 auto 0;
	height: 190%;
	z-index: -1;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		rgba(193, 0, 15, 0.42) 30%,
		rgba(193, 0, 15, 0.20) 52%,
		transparent 100%
	);
	filter: blur(70px);
	animation: td-bleed 13s ease-in-out infinite alternate;
}

@keyframes td-bleed {
	from { transform: translateY(-16%) scaleY(0.88); opacity: 0.4; }
	to   { transform: translateY(12%) scaleY(1.18); opacity: 0.8; }
}

.td-hero .td-plate { width: 100%; }

.td-title {
	margin: var(--s2) 0 var(--s3);
	/* One shadow: the red bloom that belongs to the word. Nothing else. */
	text-shadow: 0 0 90px rgba(193, 0, 15, 0.8);
}

/* Each letter breathes on its own offset — the word never sits still. */
.td-title .td-letter {
	animation: td-breathe 3.4s ease-in-out infinite;
	animation-delay: calc(var(--td-i) * -0.13s);
}

@keyframes td-breathe {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(0.045em); color: #ffdde2; }
}

.td-date {
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
	color: var(--ink);
	letter-spacing: 0.34em;
}

.td-count { display: none; }

.td-js:not(.td-nofx) .td-count {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(1.2rem, 6vw, 4.5rem);
}

.td-count__n {
	display: block;
	font-family: var(--display);
	font-size: clamp(2.2rem, 6.4vw, 5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.05em;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.td-count__l { display: block; margin-top: var(--s1); letter-spacing: 0.28em; }

.td-count > div:last-child .td-count__n { animation: td-tick 1s steps(1, end) infinite; }

@keyframes td-tick {
	0%, 58%   { color: #fff; }
	59%, 100% { color: var(--magenta); }
}

.td-released .td-count { display: none !important; }

.td-sig { margin-top: var(--s5); }

.td-sig__name {
	font-size: clamp(1.8rem, 7vw, 5.5rem);
	/* The chromatic split that is the site's signature. Two offsets,
	   static — it used to also animate and stack a third white glow. */
	text-shadow: -0.016em 0 0 var(--magenta), 0.016em 0 0 var(--cyan);
}

.td-sig__label { margin: var(--s2) 0 0; font-size: var(--meta); letter-spacing: 0.4em; text-transform: uppercase; color: var(--faint); }

.td-hero__player { width: min(1100px, 92vw); margin-top: var(--s4); }


/* ==========================================================================
   10. FILMS
   ========================================================================== */

.td-films { padding: var(--s5) 0; }

.td-films .td-h2 { margin-bottom: var(--s4); }

.td-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.td-card {
	display: flex;
	flex-direction: column;
	background: rgba(0, 0, 0, 0.88);
	transition: background 0.5s var(--ease);
}

.td-card:hover { background: rgba(0, 0, 0, 0.7); }

.td-card__body { padding: var(--s3); }

.td-card__title {
	margin: var(--s1) 0 0;
	font-family: var(--display);
	font-size: clamp(1.15rem, 2vw, 1.6rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	text-transform: uppercase;
	line-height: 1;
	color: #fff;
}

.td-card__link { margin-top: var(--s2); color: var(--cyan); }
.td-card__link a:hover { color: #fff; }

.td-card__thumb { aspect-ratio: 16 / 9; overflow: hidden; }
.td-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* --- Video facade ---
   Nothing reaches YouTube before the click. */
.td-video {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--void);
	cursor: pointer;
	overflow: hidden;
}

.td-video__thumb, .td-video__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.td-video__thumb img {
	filter: grayscale(100%) contrast(135%) brightness(0.6);
	transition: filter 1s var(--ease), transform 1s var(--ease);
}

.td-video:hover .td-video__thumb img {
	filter: none;
	transform: scale(1.05);
}

/* The play triangle, split into its channels. */
.td-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 0 20px 33px;
	border-color: transparent transparent transparent #fff;
	filter: drop-shadow(4px 0 0 var(--magenta)) drop-shadow(-4px 0 0 var(--cyan));
	transition: transform 0.5s var(--ease);
}

.td-video:hover .td-video__play { transform: translate(-50%, -50%) scale(1.25); }

.td-video.is-playing .td-video__thumb,
.td-video.is-playing .td-video__play { opacity: 0; }

.td-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


/* ==========================================================================
   11. FOOTER
   ========================================================================== */

.td-foot {
	position: relative;
	padding: var(--s5) 4vw var(--s4);
	border-top: 1px solid var(--line);
	text-align: center;
}

/* One pool of black under the whole footer, rather than a plate per
   element. The field keeps burning past the edges. */
.td-foot::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(
		ellipse 62% 78% at 50% 52%,
		rgba(0, 0, 0, 0.90) 0%,
		rgba(0, 0, 0, 0.70) 50%,
		transparent 100%
	);
}

.td-social {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(2rem, 8vw, 5rem);
	margin-bottom: var(--s5);
}

.td-social__link {
	display: grid;
	justify-items: center;
	gap: 0.75rem;
	color: var(--faint);
	transition: color 0.4s var(--ease), transform 0.4s var(--ease);
}

.td-social__link svg { width: 30px; height: 30px; }

.td-social__link:hover { color: var(--ink); transform: translateY(-3px); }

.td-credit { color: #48484a; letter-spacing: 0.28em; }


/* ==========================================================================
   12. SINGLE & ARCHIVE
   ========================================================================== */

.td-single { padding-top: calc(var(--s5) * 0.8); text-align: center; }

.td-single > header { width: var(--wrap); margin: 0 auto var(--s4); }

.td-single__player { width: min(1300px, 94vw); margin: 0 auto var(--s5); }

.td-prose {
	width: min(66ch, 92vw);
	margin-inline: auto;
	text-align: left;
	color: var(--dim);
	line-height: 1.65;
}

.td-prose > * + * { margin-top: 1.3em; }
.td-prose a { color: var(--cyan); text-decoration: underline; text-underline-offset: 0.25em; }
.td-prose a:hover { color: #fff; }

.alignwide { width: min(1200px, 94vw); margin-inline: auto; max-width: none; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); max-width: none; }

.td-archive { padding-block: calc(var(--s5) * 0.9) var(--s5); }

.td-pages { margin-top: var(--s4); display: flex; justify-content: center; }
.td-pages .nav-links { display: flex; gap: var(--s1); flex-wrap: wrap; align-items: center; }

.td-pages .page-numbers {
	padding: 0.7rem 1.1rem;
	border-radius: 980px;
	font-size: var(--meta);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--faint);
	box-shadow: inset 0 0 0 1px var(--line);
	transition: color 0.25s var(--ease), background 0.25s var(--ease);
}

.td-pages .page-numbers:hover,
.td-pages .page-numbers.current { color: var(--void); background: var(--ink); }


/* ==========================================================================
   13. UTILITIES
   ========================================================================== */

.screen-reader-text, .skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	clip-path: none;
	width: auto;
	height: auto;
	top: 1rem;
	left: 1rem;
	z-index: 1001;
	padding: 1rem;
	background: var(--ink);
	color: var(--void);
}

/* Content is visible by default; only JS hides it in order to reveal it
   on scroll. `td-nofx` is set by the boot script if the bundle never
   arrives — a static site beats an empty one. */
.td-js:not(.td-nofx) .td-in {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.td-js:not(.td-nofx) .td-in.is-visible { opacity: 1; transform: none; }

@keyframes td-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	#td-canvas, .td-grain, .td-strobe, .td-word { display: none; }
	.td-in { opacity: 1 !important; transform: none !important; }
}


/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */

@media (max-width: 720px) {
	.td-nav { display: none; }
	.td-count { gap: 1.2rem; }
	.td-card__body { padding: var(--s2); }
}

@media print {
	#td-canvas, .td-vignette, .td-grain, .td-strobe, .td-word, .td-gate, .td-head { display: none !important; }
	body { background: #fff; color: #000; }
}