/* qhlux.com — Quantum Healing Light · lux = light
   Brand: the Holistic Healing Studio colours and fonts (Marcellus for titles, Plus Jakarta Sans for text).
   Everything that moves is cheap for the computer (almost all transforms and opacity), can be paused with the
   button in the hero, and stops by itself when the visitor's device asks for less motion. */

@font-face { font-family: "Marcellus"; src: url("fonts/marcellus-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --bg: #07060f;
  --deck: #0d0a1a;
  --surface: #141027;
  --line: #2b2446;
  --text: #ede9f7;
  --soft: #d6cfee;
  --muted: #a69fc2;
  --gold: #e9c46a;
  --gold-hi: #f6dc96;
  --gold-deep: #c9971f;
  --violet: #9b7bff;
  --violet-deep: #5b2cb6;
  --display: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --ui: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --max: 1040px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font: 400 17px/1.65 var(--ui); overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img, video, iframe { display: block; max-width: 100%; }
a { color: var(--gold-hi); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 12px; }
p { margin: 0 0 1em; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 10px; background: var(--gold); color: #1a1206; font-weight: 700; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }

/* ------------------------------------------------------------------ the sky (fixed, behind everything) */
.sky {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(1200px 820px at 50% -12%, rgba(91, 44, 182, .55), rgba(91, 44, 182, 0) 62%),
    radial-gradient(900px 700px at 8% 42%, rgba(126, 34, 140, .22), rgba(126, 34, 140, 0) 62%),
    radial-gradient(1000px 800px at 96% 72%, rgba(38, 58, 160, .20), rgba(38, 58, 160, 0) 62%),
    radial-gradient(900px 600px at 50% 112%, rgba(233, 196, 106, .07), rgba(233, 196, 106, 0) 60%),
    var(--bg);
}
.stars { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.s1 { height: calc(100% + 240px); background-size: 240px 240px; opacity: .75; animation: drift240 160s linear infinite, twinkle 7s ease-in-out infinite alternate;
  background-image:
    radial-gradient(1.1px 1.1px at 200px 14px, #fff2d6 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 24px 223px, #e9e4ff 50%, transparent 100%),
    radial-gradient(1.1px 1.1px at 182px 151px, #ffffff 50%, transparent 100%),
    radial-gradient(1.1px 1.1px at 45px 157px, #e9e4ff 50%, transparent 100%),
    radial-gradient(1.1px 1.1px at 49px 37px, #ffffff 50%, transparent 100%),
    radial-gradient(1.1px 1.1px at 145px 164px, #fff2d6 50%, transparent 100%),
    radial-gradient(1.1px 1.1px at 97px 201px, #ffffff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 218px 53px, #ffffff 50%, transparent 100%),
    radial-gradient(1.1px 1.1px at 100px 58px, #e9e4ff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 195px 224px, #ffffff 50%, transparent 100%),
    radial-gradient(1.1px 1.1px at 3px 47px, #e9e4ff 50%, transparent 100%),
    radial-gradient(1.1px 1.1px at 115px 221px, #e9e4ff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 48px 92px, #ffffff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 10px 14px, #fff2d6 50%, transparent 100%); }
.s2 { height: calc(100% + 380px); background-size: 380px 380px; opacity: .8; animation: drift380 260s linear infinite, twinkle 11s ease-in-out -3s infinite alternate;
  background-image:
    radial-gradient(1.6px 1.6px at 35px 350px, #ffe9b8 50%, transparent 100%),
    radial-gradient(1.6px 1.6px at 288px 97px, #d9ccff 50%, transparent 100%),
    radial-gradient(2.2px 2.2px at 173px 138px, #ffffff 50%, transparent 100%),
    radial-gradient(1.6px 1.6px at 334px 11px, #ffffff 50%, transparent 100%),
    radial-gradient(1.6px 1.6px at 154px 170px, #d9ccff 50%, transparent 100%),
    radial-gradient(1.6px 1.6px at 145px 68px, #d9ccff 50%, transparent 100%),
    radial-gradient(1.6px 1.6px at 348px 302px, #d9ccff 50%, transparent 100%),
    radial-gradient(1.6px 1.6px at 84px 76px, #d9ccff 50%, transparent 100%),
    radial-gradient(1.6px 1.6px at 114px 163px, #ffffff 50%, transparent 100%),
    radial-gradient(1.6px 1.6px at 81px 48px, #ffe9b8 50%, transparent 100%),
    radial-gradient(1.6px 1.6px at 346px 158px, #d9ccff 50%, transparent 100%),
    radial-gradient(1.6px 1.6px at 379px 105px, #d9ccff 50%, transparent 100%); }
.s3 { height: calc(100% + 560px); background-size: 560px 560px; opacity: .9; animation: drift560 420s linear infinite;
  background-image:
    radial-gradient(2.2px 2.2px at 387px 154px, #f6dc96 50%, transparent 100%),
    radial-gradient(2.2px 2.2px at 160px 50px, #c9b6ff 50%, transparent 100%),
    radial-gradient(2.2px 2.2px at 469px 270px, #c9b6ff 50%, transparent 100%),
    radial-gradient(3.1px 3.1px at 47px 71px, #c9b6ff 50%, transparent 100%),
    radial-gradient(3.1px 3.1px at 140px 415px, #f6dc96 50%, transparent 100%),
    radial-gradient(3.1px 3.1px at 181px 389px, #f6dc96 50%, transparent 100%),
    radial-gradient(2.2px 2.2px at 253px 445px, #ffffff 50%, transparent 100%),
    radial-gradient(2.2px 2.2px at 73px 267px, #c9b6ff 50%, transparent 100%); }
@keyframes drift240 { to { transform: translateY(-240px); } }
@keyframes drift380 { to { transform: translateY(-380px); } }
@keyframes drift560 { to { transform: translateY(-560px); } }
@keyframes twinkle { from { opacity: .45; } to { opacity: .95; } }

/* ------------------------------------------------------------------ header */
.top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 14px max(16px, env(safe-area-inset-left));
  max-width: 1240px; margin: 0 auto;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 400 17px/1 var(--display); letter-spacing: .04em; }
.brand img { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 18px rgba(155, 123, 255, .55); }
.top nav { display: flex; gap: clamp(10px, 2.4vw, 28px); }
.top nav a { color: var(--soft); text-decoration: none; font-size: 14.5px; font-weight: 600; letter-spacing: .02em; padding: 6px 2px; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.top nav a:hover { color: var(--gold-hi); border-bottom-color: rgba(233, 196, 106, .6); }

/* ------------------------------------------------------------------ hero
   The flame video is drawn on pure black and laid over the sky with "screen" (black disappears). For that, nothing
   between the video and the page may start its own layer group (no z-index, isolation, filter or opacity on .hero
   and .altar): the video must blend with the sky itself. */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 84px 16px 56px; text-align: center;
}
.altar { position: relative; width: clamp(200px, 28vw, 360px); aspect-ratio: 4 / 5; margin-bottom: clamp(-82px, -6vw, -36px); }
.halo {
  position: absolute; left: 50%; top: 54%; width: 182%; height: auto; max-width: none; opacity: .34;
  transform: translate(-50%, -50%); animation: spin 240s linear infinite;
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.aura {
  position: absolute; inset: -12% -30% -4%; border-radius: 50%;
  background:
    radial-gradient(closest-side at 50% 58%, rgba(155, 123, 255, .42), rgba(155, 123, 255, .12) 55%, rgba(155, 123, 255, 0) 78%),
    radial-gradient(closest-side at 50% 86%, rgba(233, 196, 106, .30), rgba(233, 196, 106, 0) 70%);
  animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: .78; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } }
.flame { position: relative; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; background: transparent; }

.hero-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
h1 { margin: 0; line-height: 0; }
.wordmark { width: min(600px, 90vw); height: auto; filter: drop-shadow(0 0 22px rgba(155, 123, 255, .45)); }
.lux {
  display: inline-flex; gap: .62em; align-items: baseline; margin: clamp(10px, 1.6vw, 18px) 0 6px;
  font: 400 clamp(24px, 3.4vw, 36px)/1.2 var(--display); letter-spacing: .3em;
}
.lux span:not(.eq) { margin-right: -.3em; }   /* no extra space after the last letter: equal gaps around "=" */
.lux span {
  background: linear-gradient(100deg, var(--gold-deep) 0%, var(--gold-hi) 30%, #fff8e6 45%, var(--gold) 60%, #c7a2ff 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 10s ease-in-out infinite;
}
.lux .eq { background: none; color: var(--violet); animation: none; letter-spacing: 0; }
@keyframes shimmer { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.lux.small { font-size: 18px; margin: 4px 0 14px; }
.nowrap { white-space: nowrap; }
.domain { margin: 0 0 18px; color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }
.intro { max-width: 640px; color: var(--soft); font-size: clamp(16px, 1.55vw, 18.5px); margin: 0 0 26px; text-wrap: balance; }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 13px 24px;
  border-radius: 999px; font: 600 15.5px/1.2 var(--ui); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn.gold { color: #1a1206; background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-deep)); box-shadow: 0 10px 30px rgba(233, 196, 106, .25), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn.gold:hover { box-shadow: 0 14px 38px rgba(233, 196, 106, .38), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn.ghost { color: var(--text); border: 1px solid rgba(155, 123, 255, .6); background: rgba(155, 123, 255, .1); }
.btn.ghost:hover { border-color: var(--violet); background: rgba(155, 123, 255, .18); }
.btn.yt { color: #fff; background: linear-gradient(180deg, #e0243a, #b0101f); box-shadow: 0 10px 28px rgba(176, 16, 31, .3); }
.btn.yt::before { content: ""; width: 0; height: 0; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.tri { width: 0; height: 0; border-left: 10px solid #1a1206; border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent; }

/* ------------------------------------------------------------------ sections */
.block { max-width: var(--max); margin: 0 auto; padding: clamp(64px, 9vw, 116px) 16px; text-align: center; }
.kicker { margin: 0 0 8px; color: var(--gold); font-size: 12.5px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }
h2 { margin: 0 0 14px; font: 400 clamp(30px, 4.2vw, 46px)/1.15 var(--display); letter-spacing: .02em; }
h2::after { content: ""; display: block; width: 92px; height: 1px; margin: 16px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.lead { max-width: 620px; margin: 0 auto; color: var(--muted); text-wrap: balance; }

/* the video window */
.player {
  position: relative; max-width: 920px; margin: 34px auto 26px; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--deck);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(233, 196, 106, .28), 0 0 70px rgba(155, 123, 255, .18);
}
.player:focus-within { box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 3px var(--violet), 0 0 70px rgba(155, 123, 255, .3); }
.facade:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: -7px; border-radius: 16px; }
.facade { appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; margin: 0; background: none; color: inherit; font: inherit; cursor: pointer; display: block; border-radius: 0; }
.thumb { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease, filter .3s; }
.thumb.poster { object-position: 50% 70%; }
.facade:hover .thumb { transform: scale(1.025); }
.shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 6, 15, 0) 52%, rgba(7, 6, 15, .82) 100%), radial-gradient(closest-side, rgba(7, 6, 15, 0) 60%, rgba(7, 6, 15, .25)); }
.play {
  position: absolute; left: 50%; top: 50%; width: clamp(64px, 9vw, 92px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #fff3cf, var(--gold) 45%, var(--gold-deep)); box-shadow: 0 10px 40px rgba(0, 0, 0, .45), 0 0 0 8px rgba(233, 196, 106, .18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.play::before { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-left: clamp(18px, 2.4vw, 24px) solid #1a1206; border-top: clamp(11px, 1.5vw, 15px) solid transparent; border-bottom: clamp(11px, 1.5vw, 15px) solid transparent; }
.play::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(233, 196, 106, .55); animation: ring 2.8s ease-out infinite; }
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.55); opacity: 0; } }
.facade:hover .play { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 12px 46px rgba(0, 0, 0, .5), 0 0 0 10px rgba(233, 196, 106, .24); }
.vt { position: absolute; left: clamp(14px, 2.4vw, 26px); right: clamp(14px, 2.4vw, 26px); bottom: clamp(12px, 2vw, 22px); text-align: left; font: 600 clamp(14px, 1.9vw, 19px)/1.35 var(--ui); text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; }
.more { color: var(--gold-hi); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(233, 196, 106, .45); padding-bottom: 2px; }
.more:hover { border-bottom-color: var(--gold-hi); }

/* newsletter */
.kit {
  max-width: 660px; margin: 30px auto 0; padding: clamp(20px, 3.4vw, 34px); border-radius: 22px; text-align: left;
  background: linear-gradient(180deg, rgba(155, 123, 255, .12), rgba(155, 123, 255, .03)); border: 1px solid rgba(155, 123, 255, .28);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.soon { text-align: center; }
.privacy { margin: 14px 0 0; color: var(--muted); font-size: 13px; text-align: center; }
.soon-title { font: 400 clamp(21px, 2.6vw, 26px)/1.3 var(--display); color: var(--gold-hi); margin-bottom: 8px; }
.soon p:not(.soon-title) { color: var(--muted); }

/* contact */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 760px; margin: 30px auto 0; }
.card {
  display: grid; justify-items: center; gap: 4px; padding: 26px 18px; border-radius: 20px; color: var(--text); text-decoration: none;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(233, 196, 106, .24); transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.card:hover { transform: translateY(-3px); border-color: rgba(233, 196, 106, .6); background: rgba(233, 196, 106, .05); }
.card .ic { font-size: 26px; line-height: 1; color: var(--gold); margin-bottom: 6px; }
.card .lbl { color: var(--muted); font-size: 14px; }
.card strong { font-size: clamp(16px, 1.8vw, 19px); font-weight: 600; overflow-wrap: anywhere; }

/* footer */
.foot { text-align: center; padding: 56px 16px max(60px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(155, 123, 255, .16); }
.foot img { width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%; box-shadow: 0 0 22px rgba(155, 123, 255, .5); }
.foot .name { font: 400 18px/1.3 var(--display); letter-spacing: .06em; margin: 0; }
.fine { max-width: 640px; margin: 0 auto 6px; color: var(--muted); font-size: 12.5px; line-height: 1.6; }

/* the "pause the motion" button (WCAG 2.2.2) */
.calm-toggle {
  position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(155, 123, 255, .35); background: rgba(13, 10, 26, .55); color: var(--muted);
  font: 600 12.5px/1 var(--ui); cursor: pointer; transition: color .2s, border-color .2s;
}
.calm-toggle[hidden] { display: none; }
.calm-toggle:hover { color: var(--text); border-color: var(--violet); }
.calm-toggle .ico { width: 10px; height: 11px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.calm-toggle[aria-pressed="true"] .ico { width: 0; height: 0; border-right: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
body.calm .stars, body.calm .halo, body.calm .aura, body.calm .lux span, body.calm .play::after { animation-play-state: paused; }

/* ------------------------------------------------------------------ small screens */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .brand span { display: none; }
  .top nav a { font-size: 13.5px; }
  .hero { padding-top: 76px; }
  .altar { width: clamp(180px, 56vw, 280px); margin-bottom: -40px; }
  .halo { width: 160%; }
  .cards { grid-template-columns: 1fr; }
  .btn { width: 100%; max-width: 340px; }
  .row .more { width: 100%; max-width: 340px; border: 0; }
}
@media (max-width: 360px) { .top nav { gap: 8px; } .top nav a { font-size: 12.5px; } }

/* ------------------------------------------------------------------ less motion when asked */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .calm-toggle { display: none; }
  .stars, .halo, .aura, .lux span, .play::after { animation: none !important; }
  .btn, .card, .thumb, .play { transition: none; }
}