/* ─────────────────────────────────────────────
 EDAN MAEVA · style.css v1
 Minimal atmospheric landing page
───────────────────────────────────────────── */

/* Tokens */
:root {
 /* Palette */
 --clr-black: #020407;
 --clr-deep-blue: #031827;
 --clr-blue: #052c42;
 --clr-cyan: #9ae8f0;

 /* Semantic */
 --bg-main: var(--clr-black);
 --text-main: rgba(245, 248, 250, 0.92);
 --text-soft: rgba(230, 240, 245, 0.72);
 --text-muted: rgba(175, 198, 210, 0.55);
 --accent: var(--clr-cyan);
 --accent-soft: rgba(107, 221, 232, 0.50);
 --accent-glow: rgba(107, 221, 232, 0.14);

 /* Typography */
 --font-main: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;

 /* Motion */
 --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html,
body {
 margin: 0;
 min-height: 100%;
 background: var(--bg-main);
 color: var(--text-main);
 font-family: var(--font-main);
}

body {
 overflow: hidden;
}

/* Page */
.page {
 position: relative;
 width: 100vw;
 height: 100vh;
 height: 100dvh;
 min-height: 640px;
 overflow: hidden;
 background:
 radial-gradient(circle at 12% 16%, rgba(160, 245, 238, 0.54), transparent 15%),
 radial-gradient(circle at 25% 48%, rgba(48, 160, 184, 0.46), transparent 31%),
 radial-gradient(circle at 42% 12%, rgba(4, 58, 92, 0.66), transparent 25%),
 linear-gradient(110deg, #07364b 0%, #041d2e 38%, #020913 63%, #010204 100%);
}

/* Ambient haze */
.page::before {
 content: "";
 position: absolute;
 inset: -10%;
 background:
 radial-gradient(circle at 18% 25%, rgba(220, 255, 250, 0.16), transparent 11%),
 radial-gradient(circle at 30% 58%, rgba(120, 220, 225, 0.11), transparent 20%),
 radial-gradient(circle at 8% 68%, rgba(20, 90, 118, 0.15), transparent 18%);
 filter: blur(18px);
 opacity: 0.9;
 will-change: transform;
 animation: drift 22s ease-in-out infinite alternate;
}

/* Vignette */
.page::after {
 content: "";
 position: absolute;
 inset: 0;
 background:
 linear-gradient(90deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.60)),
 radial-gradient(circle at center, transparent 34%, rgba(0, 0, 0, 0.42) 100%);
 pointer-events: none;
}

@keyframes drift {
 from {
 transform: translate3d(-1%, -0.6%, 0) scale(1);
 }

 to {
 transform: translate3d(1%, 0.6%, 0) scale(1.03);
 }
}

/* Navigation */
.top-nav {
 position: absolute;
 z-index: 10;
 top: 42px;
 right: 60px;
 display: flex;
 gap: 44px;
}

.top-nav a {
 position: relative;
 color: var(--text-soft);
 text-decoration: none;
 font-size: 11px;
 letter-spacing: 0.34em;
 text-transform: uppercase;
 transition: color 220ms ease;
}

.top-nav a::after {
 content: "";
 position: absolute;
 left: 0;
 bottom: -4px;
 width: 0;
 height: 1px;
 background: var(--accent);
 transition: width 260ms var(--ease-out);
}

.top-nav a:hover {
 color: var(--accent);
}

.top-nav a:hover::after {
 width: 100%;
}

.top-nav a:focus-visible {
 outline: 1px solid var(--accent);
 outline-offset: 5px;
 border-radius: 2px;
}

/* Hero */
.hero {
 position: absolute;
 z-index: 2;
 top: 45%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: min(780px, 90vw);
 text-align: center;
}

.hero h1 {
 margin: 0;
 color: var(--text-main);
 font-weight: 300;
 font-size: clamp(42px, 4.8vw, 74px);
 letter-spacing: 0.38em;
 line-height: 1.05;
}

.line {
 width: 44px;
 height: 1px;
 margin: 36px auto 30px;
 background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
}

.hero p {
 margin: 0;
 color: var(--text-muted);
 font-size: clamp(11px, 1vw, 14px);
 letter-spacing: 0.55em;
 text-transform: uppercase;
}

/* Contact */
.contact-block {
 position: absolute;
 z-index: 2;
 left: 72px;
 bottom: 72px;
}

.social-icons {
 display: flex;
 gap: 26px;
 margin: 0 0 20px;
 padding: 0;
 list-style: none;
 align-items: center;
}

.social-icons a {
 color: var(--text-soft);
 text-decoration: none;
 font-size: 27px;
 line-height: 1;
 display: flex;
 align-items: center;
 transition:
 color 200ms ease,
 transform 200ms ease;
}

.social-icons a:hover {
 color: var(--accent);
 transform: translateY(-2px);
}

.social-icons a:focus-visible {
 outline: 1px solid var(--accent);
 outline-offset: 5px;
 border-radius: 2px;
}

.email {
 color: var(--accent);
 text-decoration: none;
 font-size: 14px;
 letter-spacing: 0.14em;
 transition: color 220ms ease;
}

.email:hover {
 color: var(--text-main);
}

.email:focus-visible {
 outline: 1px solid var(--accent);
 outline-offset: 5px;
 border-radius: 2px;
}

/* Audio panel */
.audio-panel {
 position: absolute;
 z-index: 2;
 right: 70px;
 bottom: 64px;
 display: grid;
 grid-template-columns: 72px auto 230px;
 grid-template-rows: auto auto;
 align-items: center;
 column-gap: 24px;
 row-gap: 6px;
}

.listen-button {
 grid-row: 1 / span 2;
 width: 72px;
 height: 72px;
 border: 1px solid rgba(150, 231, 242, 0.86);
 border-radius: 50%;
 background: rgba(0, 10, 18, 0.14);
 color: var(--text-main);
 font-size: 31px;
 cursor: pointer;
 display: grid;
 place-items: center;
 padding-left: 4px;
 transition:
 transform 220ms var(--ease-out),
 box-shadow 220ms ease,
 border-color 220ms ease,
 background 220ms ease;
}

.listen-button:hover {
 transform: scale(1.04);
 box-shadow: 0 0 32px var(--accent-glow);
 border-color: var(--accent);
 background: rgba(0, 30, 42, 0.28);
}

.listen-button:focus-visible {
 outline: 1px solid var(--accent);
 outline-offset: 6px;
}

.listen-button[aria-pressed="true"] {
 border-color: var(--accent);
 box-shadow: 0 0 26px var(--accent-glow);
}

.listen-copy span {
 display: block;
 color: var(--text-main);
 font-size: 19px;
 letter-spacing: 0.44em;
 font-weight: 300;
}

.audio-line {
 position: relative;
 height: 38px;
 overflow: hidden;
 opacity: 0.74;
}

.audio-line::before {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 top: 19px;
 height: 1px;
 background: linear-gradient(90deg, transparent, rgba(95, 215, 235, 0.55), transparent);
}

.audio-line span {
 position: absolute;
 left: 66px;
 top: 11px;
 width: 86px;
 height: 18px;
 background:
 repeating-linear-gradient(
 90deg,
 rgba(95, 215, 235, 0.85) 0 2px,
 transparent 2px 7px
 );
 clip-path: polygon(
 0 50%,
 6% 35%,
 12% 72%,
 18% 18%,
 24% 84%,
 30% 25%,
 36% 80%,
 42% 33%,
 48% 72%,
 54% 40%,
 60% 66%,
 66% 44%,
 72% 60%,
 78% 48%,
 84% 56%,
 90% 50%,
 100% 52%
 );
 opacity: 0.52;
}

.time-label {
 grid-column: 3;
 color: var(--text-muted);
 font-size: 12px;
 letter-spacing: 0.16em;
 justify-self: end;
 font-variant-numeric: tabular-nums;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
 .page::before {
 animation: none;
 }

 .top-nav a,
 .top-nav a::after,
 .social-icons a,
 .listen-button,
 .email {
 transition: none;
 }
}

/* Mobile */
@media (max-width: 900px) {
 body {
 overflow: auto;
 }

 .page {
 width: 100%;
 height: auto;
 min-height: 100vh;
 min-height: 100dvh;
 }

 .top-nav {
 top: 24px;
 right: 20px;
 left: 20px;
 justify-content: space-between;
 gap: 10px;
 }

 .top-nav a {
 font-size: 9px;
 letter-spacing: 0.18em;
 }

 .hero {
 top: 41%;
 width: min(680px, 92vw);
 }

 .hero h1 {
 font-size: clamp(34px, 10vw, 62px);
 letter-spacing: 0.22em;
 }

 .line {
 margin: 30px auto 24px;
 }

 .hero p {
 font-size: 10px;
 letter-spacing: 0.27em;
 }

 .contact-block {
 left: 24px;
 bottom: 28px;
 }

 .social-icons {
 gap: 18px;
 margin-bottom: 16px;
 }

 .social-icons a {
 font-size: 24px;
 }

 .email {
 font-size: 11px;
 letter-spacing: 0.08em;
 }

 .audio-panel {
 right: 22px;
 bottom: 110px;
 grid-template-columns: 60px auto;
 grid-template-rows: auto;
 column-gap: 16px;
 }

 .listen-button {
 width: 60px;
 height: 60px;
 grid-row: 1;
 font-size: 26px;
 }

 .audio-line,
 .time-label {
 display: none;
 }

 .listen-copy span {
 font-size: 15px;
 letter-spacing: 0.36em;
 }
}