/* ═══════════════════════════════════════════════
   SXR — Scroll Expansion Root (Particle Hero)
═══════════════════════════════════════════════ */
body.sxr-locked {
  overflow: hidden;
}

.sxr {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  box-sizing: border-box;
  overflow: hidden;
}
.sxr::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 220px;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  z-index: 10;
  pointer-events: none;
}
.sxr-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #000000;
}
.sxr-frame {
  --lamp-drop: 25vh; /* cord length / vertical anchor — inherited by lamp, spotlight, lens flare, byline */
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  z-index: 1;
}
.sxr-card {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  transform-origin: 50% calc(var(--lamp-drop) + 6em); /* lamp's visual center — JS layer scales around this point */
}

/* Particle Hero */
.particle-hero {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #050508;
  background-image: linear-gradient(0deg, rgba(200,200,200,.04), rgba(120,120,120,.04));
  font-size: max(calc(min(600px, 80vh) * 0.03), 10px);
}
.particle-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  animation: load 0.4s ease-in-out forwards;
}

/* Hero header + hanging lamp */
.hero-header {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 0;
  position: absolute;
  top: 0; left: 0; right: 0;
  margin: 0 auto;
  opacity: 1; /* baseline after fade-in animation; JS fades back out during 55-70% */
  transform: translateY(-1em);
  animation: load 2s ease-in-out, up 1.4s ease-out forwards; /* `load` no longer `forwards` so JS can drive opacity */
  z-index: 10;
}

/* Hanging Lamp */
.hanging-lamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transform-origin: center top;
  animation: lamp-sway 8s ease-in-out 3s infinite;
  position: relative;
}
.hanging-lamp:focus-visible {
  outline: 2px solid rgba(255, 240, 200, 0.45);
  outline-offset: 12px;
  border-radius: 4px;
}

.lamp-cord {
  width: 2px;
  height: var(--lamp-drop);
  background: linear-gradient(to bottom, #252528, #2e2e35);
  flex-shrink: 0;
  position: relative;
}
/* Ceiling mount nub */
.lamp-cord::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 6px;
  background: #28282d;
  border-radius: 50% 50% 30% 30%;
}

.lamp-fixture {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lamp-shade-svg {
  width: 8.5em;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.95));
  transition: filter 1s ease-in-out;
}

.lamp-shade-logo {
  width: 11em;
  height: auto;
  display: block;
  margin-top: -5em; /* pull logo up to close the gap between the cord and the ribbon art (PNG has transparent top padding) */
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.95));
  transition: filter 1s ease-in-out;
  pointer-events: none;
  user-select: none;
}

@keyframes lamp-sway {
  0%   { transform: rotate(0deg); }
  18%  { transform: rotate(1.3deg); }
  38%  { transform: rotate(-0.8deg); }
  58%  { transform: rotate(1deg); }
  78%  { transform: rotate(-0.5deg); }
  100% { transform: rotate(0deg); }
}

@keyframes lamp-flicker {
  0%   { opacity: 1; }
  6%   { opacity: 0.08; }
  12%  { opacity: 0.85; }
  20%  { opacity: 0.18; }
  28%  { opacity: 0.92; }
  40%  { opacity: 0.55; }
  50%  { opacity: 1; }
  100% { opacity: 1; }
}

.lamp-flickering {
  animation: lamp-flicker 0.65s linear forwards !important;
}

/* Spotlights */
.spotlight-wrapper {
  pointer-events: none;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  transition: filter 1s ease-in-out;
  z-index: 2;
  /* Sync with the lamp swing — same pivot (top center, where the cord hangs from),
     same timing/duration so the beam cone tilts and shifts with the lamp body. */
  transform-origin: 50% 0%;
  animation: lamp-sway 8s ease-in-out 3s infinite;
}
.spotlight-beam {
  border-radius: 0 0 50% 50%;
  position: absolute;
  left: calc(50% - 15em);
  top: calc(var(--lamp-drop) + 1.5em); /* lifted so the cone apex meets the bottom of the ribbon (logo is pulled up -5em via .lamp-shade-logo) */
  width: 30em;
  height: 60em;
  background-image: conic-gradient(from 0deg at 50% 0%, transparent 45%, rgba(180,180,180,.25) 49%, rgba(200,200,200,.4) 50%, rgba(180,180,180,.25) 51%, transparent 55%);
  transform-origin: 50% 0;
  filter: blur(15px) opacity(0.5);
  z-index: -1;
  opacity: 0;
}
.spotlight-beam:nth-child(1) {
  transform: rotate(20deg);
  animation: load 2s ease-in-out forwards, loadrot 2s ease-in-out forwards;
}
.spotlight-beam:nth-child(2) {
  transform: rotate(-20deg);
  animation: load 2s ease-in-out forwards, loadrot 2s ease-in-out forwards;
}
.spotlight-beam:nth-child(3) {
  transform: rotate(0deg);
  animation: load 2s ease-in-out forwards, loadrot 2s ease-in-out forwards;
}

/* Accent lines */
.accent-lines {
  pointer-events: none;
  position: absolute;
  top: 0; left: 0; right: 0;
  width: 100%; height: 42em;
  z-index: -2;
}
.accent-h-line {
  position: absolute;
  left: 0; right: 0;
  margin: auto;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,200,200,.12), transparent);
  opacity: 0; transform: scale(0);
  animation: accentload 2s ease-out 2.4s forwards;
}
.accent-v-line {
  position: absolute;
  top: 0;
  width: 1px; height: 100%;
  background: rgba(200,200,200,.12);
  opacity: 0; transform: scale(0);
  animation: accentload 2s ease-out 2s forwards;
}

/* Gold mode */
.sxr.gold-mode .lamp-shade-svg,
.sxr.gold-mode .lamp-shade-logo      { filter: drop-shadow(0 2px 14px rgba(0,0,0,0.95)) brightness(1.25); }
.sxr.gold-mode .spotlight-wrapper    { filter: invert(1) brightness(4.7) opacity(0.5); }
.sxr.gold-mode .particle-canvas      { filter: drop-shadow(2em 4em 0px #FAF9F6) drop-shadow(-8em -14em 0px #FAF9F6); }
.sxr.gold-mode .accent-lines         { filter: invert(1) brightness(4.4) opacity(1); }

/* Split titles container */
.sxr-titles {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  z-index: 20;
  pointer-events: none;
  mix-blend-mode: difference;
}


/* ═══════════════════════════════════════════════
   SITE CONTENT — Digital Serenity
═══════════════════════════════════════════════ */
.site-content {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--color-bg);
  padding: 7rem 2rem 4rem;
  opacity: 0;
  overflow: hidden;
}
.content-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.content-eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  color: var(--color-ash);
  margin-bottom: 1.75rem;
}
.content-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: 2rem;
}
.content-body {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.85;
  color: var(--color-text);
}

/* ═══════════════════════════════════════════════
   CONTENT SPLIT — two-column body layout
═══════════════════════════════════════════════ */
.content-heading-wrap {
  position: relative;
  margin-bottom: 3.5rem;
}

.content-split {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 4rem;
  align-items: start;
}

.content-split-right .testimonials {
  margin-top: 9rem;
}

@media (max-width: 900px) {
  .content-split {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .content-split-right .testimonials {
    margin-top: 4rem;
  }
}

/* ═══════════════════════════════════════════════
   DIGITAL SERENITY — grid, words, mouse, ripples
═══════════════════════════════════════════════ */

/* SVG grid overlay */
.ds-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
@keyframes ds-grid-draw {
  0%   { stroke-dashoffset: 1000; opacity: 0; }
  50%  { opacity: 0.3; }
  100% { stroke-dashoffset: 0; opacity: 0.15; }
}
@keyframes ds-pulse-glow {
  0%, 100% { opacity: 0.1; transform: scale(1); }
  50%       { opacity: 0.3; transform: scale(1.1); }
}
.ds-grid-line {
  stroke: rgba(250, 249, 246, 0.08);
  stroke-width: 0.5;
  opacity: 0;
  stroke-dasharray: 5 5;
  stroke-dashoffset: 1000;
  animation: ds-grid-draw 2s ease-out forwards;
}
.ds-dot {
  fill: rgba(250, 249, 246, 0.18);
  opacity: 0;
  animation: ds-pulse-glow 3s ease-in-out infinite;
}

/* Corner elements */
.ds-corner {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(250, 249, 246, 0.08);
  opacity: 0;
  animation: ds-word-appear 1s ease-out forwards;
  pointer-events: none;
}
.ds-corner--tl { top: 2rem; left: 2rem; }
.ds-corner--tr { top: 2rem; right: 2rem; }
.ds-corner--bl { bottom: 2rem; left: 2rem; }
.ds-corner--br { bottom: 2rem; right: 2rem; }
.ds-corner-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(250, 249, 246, 0.25);
  border-radius: 50%;
  opacity: 0.6;
  top: 0; left: 0;
}
.ds-corner-dot--tr { top: 0; right: 0; left: auto; }
.ds-corner-dot--bl { top: auto; bottom: 0; left: 0; }
.ds-corner-dot--br { top: auto; bottom: 0; right: 0; left: auto; }

/* Floating particles */
.ds-float {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--color-ds-mid);
  border-radius: 50%;
  opacity: 0;
  animation: ds-float 4s ease-in-out infinite;
  animation-play-state: paused;
  pointer-events: none;
  z-index: 0;
}
@keyframes ds-float {
  0%, 100% { transform: translateY(0) translateX(0);    opacity: 0.2; }
  25%       { transform: translateY(-10px) translateX(5px);  opacity: 0.6; }
  50%       { transform: translateY(-5px) translateX(-3px);  opacity: 0.4; }
  75%       { transform: translateY(-15px) translateX(7px);  opacity: 0.8; }
}

/* Word-by-word animation */
@keyframes ds-word-appear {
  0%   { opacity: 0; transform: translateY(30px) scale(0.8); filter: blur(10px); }
  50%  { opacity: 0.8; transform: translateY(10px) scale(0.95); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.word-animate {
  display: inline-block;
  opacity: 0;
  margin: 0 0.1em;
  transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
}
.word-animate:hover {
  color: var(--color-ash);
  transform: translateY(-2px);
  text-shadow: 0 0 20px rgba(140,136,130,0.5);
}

/* Heading decoration */
.ds-heading {
  position: relative;
}
.ds-italic {
  font-style: italic;
}
.ds-heading::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #7B7B7C, transparent);
  animation: ds-underline-grow 2s ease-out forwards;
  animation-delay: 2.5s;
}
@keyframes ds-underline-grow { to { width: 100%; } }

/* Side accent lines on heading */
.ds-side-line {
  position: absolute;
  top: 50%;
  width: 1rem;
  height: 1px;
  background: #7B7B7C;
  opacity: 0;
  animation: ds-word-appear 1s ease-out forwards;
  animation-delay: 3.2s;
  pointer-events: none;
}
.ds-side-line--l { left: -1.5rem; transform: translateY(-50%); }
.ds-side-line--r { right: -1.5rem; transform: translateY(-50%); }

/* Label rows */
.ds-label-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 2.5rem;
}
.ds-label-row--bottom {
  margin-top: 2.5rem;
  margin-bottom: 0;
}
.ds-label {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-ash);
  opacity: 0.8;
}
.ds-rule {
  margin: 1rem auto;
  width: 4rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(123, 123, 124, 0.4), transparent);
}
.ds-dots-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.ds-dot-sm {
  width: 4px;
  height: 4px;
  background: var(--color-ds-mid);
  border-radius: 50%;
}

/* .content-inner relative for side lines */
.content-inner {
  position: relative;
}

/* Mouse-follow gradient */
.ds-mouse-gradient {
  position: fixed;
  top: -192px;
  left: -192px;
  pointer-events: none;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(140,136,130,0.07), rgba(250,249,246,0.03), transparent 70%);
  width: 384px;
  height: 384px;
  filter: blur(48px);
  will-change: transform, opacity;
  transition: transform 70ms linear, opacity 300ms ease-out;
  opacity: 0;
  z-index: 50;
}

/* Click ripple */
.ds-ripple {
  position: fixed;
  width: 4px;
  height: 4px;
  background: rgba(250, 249, 246, 0.35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: ds-pulse-glow 1s ease-out forwards;
  z-index: 9999;
}

/* ═══════════════════════════════════════════════
   GRADIENT BUTTON
═══════════════════════════════════════════════ */
@property --gb-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes gb-spin {
  to { --gb-angle: 360deg; }
}

.gradient-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 260px;
  height: 52px;
  border-radius: 50px;
  cursor: pointer;
  text-decoration: none;
  background: conic-gradient(
    from var(--gb-angle),
    transparent 0%,
    rgba(250,249,246,0.1) 15%,
    rgba(250,249,246,0.9) 45%,
    rgba(250,249,246,0.1) 75%,
    transparent 100%
  );
  animation: gb-spin 3s linear infinite;
}

/* Inner dark fill — creates the "border only" illusion */
.gradient-btn::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 48px;
  background: #111111;
  z-index: 1;
  transition: background 0.3s ease;
}

.gradient-btn:hover::after {
  background: #171717;
}

.gradient-btn:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 4px;
}

.gradient-btn-label {
  position: relative;
  z-index: 2;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text);
  transition: letter-spacing 0.3s ease;
}

.gradient-btn:hover .gradient-btn-label {
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════
   GLASS BUTTON (21st.dev)
═══════════════════════════════════════════════ */

/* Wrapper — positions shadow as a sibling layer */
.glass-button-wrap {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  border-radius: 9999px;
  text-decoration: none;
}

/* The interactive element */
.glass-button {
  position: relative;
  isolation: isolate;
  cursor: pointer;
  border-radius: 9999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Smoky glass tint — dark glass on the cream/gradient site-content bg */
  background: rgba(17, 17, 17, 0.62);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);

  /* Subtle ash border */
  border: 1px solid rgba(140, 136, 130, 0.30);

  transition: background 0.32s ease,
              border-color 0.32s ease,
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Top-edge inner highlight — gives the glass its lit look */
.glass-button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.00) 55%
  );
  pointer-events: none;
  z-index: 1;
}

.glass-button-wrap:hover .glass-button,
.glass-button:focus-visible {
  background: rgba(17, 17, 17, 0.78);
  border-color: rgba(140, 136, 130, 0.55);
  transform: translateY(-2px);
}

.glass-button-wrap:active .glass-button {
  transform: translateY(0);
}

.glass-button:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}

/* Text label inside */
.glass-button-text {
  position: relative;
  display: block;
  user-select: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--color-text);
  white-space: nowrap;
  padding: 0.875rem 1.75rem;
  z-index: 2;
}

/* Drop-shadow layer rendered beneath the button */
.glass-button-shadow {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  box-shadow:
    0 2px  8px  rgba(0, 0, 0, 0.30),
    0 6px  20px rgba(0, 0, 0, 0.22),
    0 12px 36px rgba(0, 0, 0, 0.14);
  pointer-events: none;
  z-index: -1;
  transition: box-shadow 0.32s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-button-wrap:hover .glass-button-shadow {
  box-shadow:
    0 4px  12px rgba(0, 0, 0, 0.38),
    0 10px 28px rgba(0, 0, 0, 0.28),
    0 20px 48px rgba(0, 0, 0, 0.18);
  transform: translateY(-2px);
}


/* ═══════════════════════════════════════════════
   LAMP BACKGROUND — site-content
═══════════════════════════════════════════════ */
.lamp-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.lamp-beams {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
}

/* Left conic beam — right edge sits at screen center */
.lamp-conic--left {
  position: absolute;
  right: 50%;
  top: 0;
  width: min(30rem, 55vw);
  height: min(14rem, 30vh);
  overflow: hidden;
  background: conic-gradient(
    from 70deg at 100% 0%,
    rgba(250, 249, 246, 0.35),
    transparent 40%
  );
}

/* Right conic beam — left edge sits at screen center */
.lamp-conic--right {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(30rem, 55vw);
  height: min(14rem, 30vh);
  overflow: hidden;
  background: conic-gradient(
    from 290deg at 0% 0%,
    rgba(250, 249, 246, 0.35),
    transparent 40%
  );
}

/* Bottom edge fade — softens the beam cutoff */
.lamp-mask--bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, var(--color-bg) 20%, transparent);
}

/* Left outer fade — prevents hard edge at beam's outer side */
.lamp-conic--left .lamp-mask--left-side {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 32%;
  background: linear-gradient(to right, var(--color-bg) 20%, transparent);
}

/* Right outer fade */
.lamp-conic--right .lamp-mask--right-side {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 32%;
  background: linear-gradient(to left, var(--color-bg) 20%, transparent);
}

/* Dark blur bar — fills the space below beams, blurs the transition */
.lamp-blur-bar {
  position: absolute;
  top: min(11rem, 27vh);
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  height: min(18rem, 45vh);
  background: var(--color-bg);
  filter: blur(56px);
  z-index: 1;
}

/* Outer ash glow — wide, soft halo */
.lamp-orb-outer {
  position: absolute;
  top: min(6rem, 16vh);
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(28rem, 85vw);
  height: min(9rem, 20vh);
  border-radius: 50%;
  background: rgba(140, 136, 130, 0.45);
  filter: blur(64px);
  z-index: 2;
}

/* Inner cream glow — tight, bright core */
.lamp-orb-inner {
  position: absolute;
  top: min(2.5rem, 8vh);
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(16rem, 50vw);
  height: min(9rem, 20vh);
  border-radius: 50%;
  background: rgba(250, 249, 246, 0.42);
  filter: blur(36px);
  z-index: 2;
}

/* Thin bright filament line at the lamp source */
.lamp-line {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: min(30rem, 80vw);
  height: 2px;
  background: rgba(250, 249, 246, 0.88);
  box-shadow: 0 0 12px 2px rgba(250, 249, 246, 0.35);
  z-index: 4;
}

/* Cover strip — unused placeholder kept for structural parity */
.lamp-cover {
  display: none;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .site-content { padding: 4rem 1.5rem 3rem; }
}
@media (max-width: 480px) {
  .site-content { padding: 3.5rem 1.25rem 2.5rem; }
}

/* ════════════════════════════════════════════════════════════
   CINEMATIC LAYERS — added by Task 4
   All layers start invisible. Values are driven by JS layer engine.
   Naming: `.cn-*` for greppability and easy removal.
═══════════════════════════════════════════════════════════════ */

/* Letterbox bars */
.cn-letterbox {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;                /* JS drives 0 → 8vh during 0-10% */
  background: #000;
  z-index: 100;
  pointer-events: none;
}
.cn-letterbox--top    { top: 0; }
.cn-letterbox--bottom { bottom: 0; }

/* Grain + vignette overlay
   Static SVG noise inlined as data URL. Readable source:
     <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
       <filter id="n">
         <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/>
       </filter>
       <rect width="100%" height="100%" filter="url(#n)" opacity="0.5"/>
     </svg>
*/
.cn-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0;              /* JS drives 0 → 0.4 (desktop) or 0.3 (mobile) */
  z-index: 90;
  pointer-events: none;
}
.cn-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%);
  opacity: 0;              /* JS drives 0 → 1 */
  z-index: 91;
  pointer-events: none;
}

/* Dust layer (populated in Task 14) */
.cn-dust-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* Text beats */
.cn-pre-title {
  position: absolute;
  left: 50%;
  top: calc(15vh - 6em);   /* above the lamp */
  transform: translateX(-50%);
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d4af6a;
  margin: 0;
  white-space: nowrap;
  opacity: 0;              /* JS drives */
  z-index: 60;
  pointer-events: none;
}
.cn-byline {
  position: absolute;
  left: 50%;
  top: 50vh;
  transform: translate(-50%, -50%) scale(0.96);
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 44px;
  color: #f0e9d8;
  margin: 0;
  white-space: nowrap;
  opacity: 0;              /* JS drives */
  z-index: 60;
  pointer-events: none;
  /* Spotlight halo — reads as "the beam catches the byline" */
  text-shadow:
    0 0 18px rgba(255, 240, 200, 0.85),
    0 0 42px rgba(255, 220, 150, 0.55),
    0 0 90px rgba(220, 175, 100, 0.30),
    0 4px 10px rgba(0, 0, 0, 0.55);
}

/* Unified title (replaces .sxr-title-l/m/r) */
.cn-title {
  display: inline-block;
  position: relative;
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-size: clamp(2.2rem, 6vw, 5.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.92;
  color: transparent;
  white-space: nowrap;
  opacity: 1;
  animation: load 2s ease-in-out; /* matches lamp fade-in timing; no `forwards` so JS can drive opacity after */
  transform-origin: center center;
  isolation: isolate;
  will-change: transform, opacity, filter;
}
.cn-title-half {
  display: block;
  color: var(--color-primary);
  will-change: transform, opacity;
  text-shadow:
    0 0 14px rgba(255, 215, 140, 0.55),
    0 0 32px rgba(255, 190, 80,  0.35),
    0 0 65px rgba(220, 155, 50,  0.18),
    0 4px  8px rgba(0,   0,   0,  0.65);
}
.cn-title-half--top {
  position: relative;
  clip-path: inset(0 0 46% 0);
}
.cn-title-half--bottom {
  position: absolute;
  inset: 0;
  clip-path: inset(54% 0 0 0);
}
.cn-title-cut {
  display: none;
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  top: 54%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(250, 249, 246, 0.2), rgba(250, 249, 246, 0.88), rgba(250, 249, 246, 0.2), transparent);
  box-shadow: 0 0 18px rgba(250, 249, 246, 0.55);
  opacity: 0;
  transform: translateY(-50%) scaleX(0.2);
  transform-origin: center;
  will-change: transform, opacity;
  pointer-events: none;
}

.cn-dust {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255, 235, 180, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255, 220, 140, 0.5);
  animation: cn-dust-drift 6s linear infinite;
  opacity: 0;
}
.cn-dust--soft {
  width: 1px;
  height: 1px;
  background: rgba(255, 238, 196, 0.48);
  box-shadow: 0 0 8px rgba(255, 220, 150, 0.32);
  animation-duration: 7.5s;
}
.cn-dust--wide {
  width: 1.5px;
  height: 1.5px;
  background: rgba(255, 230, 170, 0.58);
  box-shadow: 0 0 10px rgba(255, 215, 140, 0.38);
  animation-duration: 6.8s;
}
.cn-dust--pin {
  width: 1px;
  height: 1px;
  background: rgba(255, 244, 214, 0.36);
  box-shadow: 0 0 5px rgba(255, 232, 180, 0.24);
  animation-duration: 8.6s;
}
@keyframes cn-dust-drift {
  0%   { transform: translateY(0)     translateX(0);    opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.8; }
  100% { transform: translateY(-150px) translateX(10px); opacity: 0; }
}

/* ════════════════════════════════════════════════
   CINEMATIC LAYERS — Mobile (< 768px)
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .cn-pre-title { font-size: 9px; letter-spacing: 0.14em; }
  .cn-byline    { font-size: 28px; }
  .cn-title     { font-size: clamp(2rem, 11vw, 3.8rem); }
}