/*
Theme Name: The Dragon Mind — Splash
Theme URI: https://thedragonmind.com
Author: The Dragon Mind
Author URI: https://thedragonmind.com
Description: Page unique et noire : l'emblème seul, porté par une brume lente et une respiration de sommeil. Le dragon dort, mais il est vivant. Aucun texte, aucune extension, aucun suivi.
Version: 1.4.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tdm-splash
Tags: one-page, minimal, dark, landing-page
*/

/* ---------------------------------------------------------------
   1. Jetons de marque
   --------------------------------------------------------------- */
:root {
	--tdm-black:  #050506;
	--tdm-silver: #dcdee2;
	--tdm-gutter: clamp(1.25rem, 5vw, 3rem);

	/* Un seul souffle pour tout : le corps et la lueur respirent en phase.
	   12 s = cinq respirations par minute, le rythme d'un sommeil profond. */
	--tdm-breath: 12s;
}

/* ---------------------------------------------------------------
   2. Base
   --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100svh;
	background-color: var(--tdm-black);
	color: var(--tdm-silver);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow: hidden;
}

img { max-width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------
   3. Scène
   --------------------------------------------------------------- */
.tdm-stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: clamp(1.5rem, 5vh, 3rem) var(--tdm-gutter);
	text-align: center;
}

/* Lueur de fond : le socle immobile de l'image */
.tdm-stage::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(ellipse 70% 55% at 50% 48%, rgba(150, 165, 185, 0.12), transparent 68%);
}

/* Grain, posé par-dessus tout le reste pour unifier l'image */
.tdm-stage::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	opacity: 0.035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.tdm-card {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 760px;
}

/* ---------------------------------------------------------------
   4. Brume : trois nappes désynchronisées, jamais la même image
   --------------------------------------------------------------- */
.tdm-mist {
	position: fixed;
	inset: -20%;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

.tdm-mist__layer {
	position: absolute;
	inset: 0;
	will-change: transform, opacity;
}

/* Nappe de tête : la plus dense et la plus rapide */
.tdm-mist__layer--a {
	background:
		radial-gradient(ellipse 38% 30% at 22% 38%, rgba(132, 152, 182, 0.34), transparent 70%),
		radial-gradient(ellipse 30% 26% at 76% 62%, rgba(112, 132, 164, 0.28), transparent 72%),
		radial-gradient(ellipse 26% 22% at 52% 14%, rgba(122, 142, 174, 0.22), transparent 74%);
	filter: blur(40px);
	animation: tdm-mist-a 70s ease-in-out infinite;
}

/* Nappe médiane */
.tdm-mist__layer--b {
	background:
		radial-gradient(ellipse 44% 26% at 62% 28%, rgba(104, 126, 160, 0.28), transparent 72%),
		radial-gradient(ellipse 34% 34% at 30% 74%, rgba(126, 146, 178, 0.24), transparent 72%),
		radial-gradient(ellipse 30% 24% at 84% 88%, rgba(96, 118, 152, 0.20), transparent 74%);
	filter: blur(55px);
	animation: tdm-mist-b 96s ease-in-out infinite;
}

/* Nappe de fond : masses larges, presque immobiles, qui donnent la profondeur */
.tdm-mist__layer--c {
	background:
		radial-gradient(ellipse 56% 40% at 42% 56%, rgba(90, 110, 144, 0.22), transparent 76%),
		radial-gradient(ellipse 48% 34% at 82% 34%, rgba(112, 134, 168, 0.18), transparent 76%),
		radial-gradient(ellipse 42% 30% at 12% 84%, rgba(100, 120, 154, 0.18), transparent 76%);
	filter: blur(72px);
	animation: tdm-mist-c 128s ease-in-out infinite;
}

/* Vignettage posé par-dessus la brume : sans lui, les bords s'éclaircissent
   et le cadre sombre disparaît. Il n'entame pas l'emblème, resté au centre. */
.tdm-vignette {
	position: fixed;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: radial-gradient(ellipse 78% 78% at 50% 50%, transparent 42%, rgba(0, 0, 0, 0.62) 100%);
}

/* ---------------------------------------------------------------
   5. Emblème
   --------------------------------------------------------------- */
.tdm-mark {
	position: relative;
	margin: 0 auto;
	width: min(86vw, 620px);
}

/* La lueur respire avec le corps : le souffle qu'on devine sous l'écaille */
.tdm-mark::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 46%;
	width: 92%;
	height: 68%;
	transform: translate(-50%, -50%);
	background: radial-gradient(ellipse at center, rgba(190, 205, 225, 0.24), transparent 70%);
	filter: blur(32px);
	z-index: -1;
	animation: tdm-breath-glow var(--tdm-breath) ease-in-out infinite;
}

/* Trois couches distinctes : la dérive, le souffle, l'image.
   Chacune possède sa transformation, aucune n'écrase l'autre. */
.tdm-mark__inner {
	animation: tdm-drift 32s ease-in-out infinite;
	will-change: transform;
}

.tdm-mark__breath {
	animation: tdm-breath-body var(--tdm-breath) ease-in-out infinite;
	will-change: transform;
}

.tdm-mark picture { display: block; }

.tdm-mark__img {
	width: 100%;
	filter: drop-shadow(0 18px 42px rgba(0, 0, 0, 0.85));
}

/* Reflet inversé : seule la base du dragon est reprise */
.tdm-mark__echo-wrap {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 13%;
	margin-top: -1%;
	overflow: hidden;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 85%);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 85%);
}

.tdm-mark__echo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transform: scaleY(-1);
	opacity: 0.18;
}

/* ---------------------------------------------------------------
   6. Accessibilité
   --------------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------
   7. Animations
   --------------------------------------------------------------- */
@keyframes tdm-rise {
	from { opacity: 0; transform: scale(0.985); }
	to   { opacity: 1; transform: none; }
}

/* Respiration : une seule ample montée, une courte suspension au sommet,
   puis une expiration plus longue que l'inspiration — comme un corps endormi.
   Aucune frappe, aucun à-coup : le mouvement ne s'interrompt jamais. */
@keyframes tdm-breath-body {
	0%   { transform: scale(1); }
	42%  { transform: scale(1.022); }
	52%  { transform: scale(1.020); }
	94%  { transform: scale(1); }
	100% { transform: scale(1); }
}

@keyframes tdm-breath-glow {
	0%   { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
	42%  { opacity: 0.92; transform: translate(-50%, -50%) scale(1.09); }
	52%  { opacity: 0.88; transform: translate(-50%, -50%) scale(1.085); }
	94%  { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
	100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
}

/* Dérive : le corps suspendu, presque immobile */
@keyframes tdm-drift {
	0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
	22%  { transform: translate3d(0.5%, -1.6%, 0) rotate(0.65deg); }
	45%  { transform: translate3d(-0.45%, 1%, 0) rotate(-0.5deg); }
	70%  { transform: translate3d(-0.7%, -1.2%, 0) rotate(-0.75deg); }
	87%  { transform: translate3d(0.3%, 0.6%, 0) rotate(0.3deg); }
	100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

/* Les trois nappes dérivent ET s'épaississent : c'est la densité qui varie,
   pas seulement la position. Durées premières entre elles (70 / 96 / 128 s)
   pour que la combinaison ne se répète jamais à l'œil. */
@keyframes tdm-mist-a {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1);       opacity: 0.85; }
	33%      { transform: translate3d(5%, -4%, 0) scale(1.12); opacity: 1; }
	66%      { transform: translate3d(-4%, 4%, 0) scale(1.05); opacity: 0.72; }
}

@keyframes tdm-mist-b {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1.06);      opacity: 0.78; }
	40%      { transform: translate3d(-6%, 3%, 0) scale(1);      opacity: 1; }
	75%      { transform: translate3d(4%, -3%, 0) scale(1.14);   opacity: 0.68; }
}

@keyframes tdm-mist-c {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1.1);       opacity: 0.9; }
	45%      { transform: translate3d(3.5%, 2.5%, 0) scale(1);   opacity: 0.66; }
	72%      { transform: translate3d(-3%, -2.5%, 0) scale(1.16); opacity: 1; }
}

.tdm-reveal {
	opacity: 0;
	animation: tdm-rise 2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s forwards;
}

@media (prefers-reduced-motion: reduce) {
	.tdm-reveal { opacity: 1; animation: none; }
	.tdm-mark::before,
	.tdm-mark__inner,
	.tdm-mark__breath,
	.tdm-mist__layer { animation: none; }
}

/* ---------------------------------------------------------------
   8. Écrans courts / mobiles
   --------------------------------------------------------------- */
@media (max-height: 620px) {
	.tdm-mark { width: min(70vw, 420px); }
}

@media (max-width: 640px) {
	/* Flou plein écran allégé : même rendu, beaucoup moins de calcul */
	.tdm-mist__layer--a { filter: blur(26px); }
	.tdm-mist__layer--b { filter: blur(34px); }
	.tdm-mist__layer--c { filter: blur(44px); }
}

@media (max-width: 480px) {
	.tdm-mark__echo-wrap { display: none; }
}