/* ==========================================================================
   IDCT — Bartosz Pachołek · "Lantern Depths" coming-soon
   A quiet, dimensional night-scene. The black-on-transparent mark rests inside
   a warm ivory "lit lantern" plate (solves black-on-dark, preserves the logo's
   white cut-outs). The cursor is a single moving light source: the ambient glow
   follows it while every shadow casts away from it, and depth planes drift.

   Motion is transform-only (GPU-composited). Reduced-motion and coarse-pointer
   users get a fully-composed static scene with a soft overhead shadow.
   ========================================================================== */

:root {
  /* --- reactive state (written by JS; these are the resting defaults) --- */
  --px: 0;            /* smoothed cursor X, -1 .. 1 (0 = centre) */
  --py: 0;            /* smoothed cursor Y, -1 .. 1 */
  --gx: 50%;          /* ambient light-source X */
  --gy: 34%;          /* ambient light-source Y */
  --lit: 0.55;        /* pointer-presence, 0 .. 1 (lifts the lantern) */
  --ring: -90;        /* light angle in deg for the specular rim */

  /* --- palette --- */
  --bg-0:  #05070b;   /* deepest */
  --bg-1:  #070d16;
  --bg-2:  #0b1c2d;
  --bg-3:  #12324a;   /* lit petrol */
  --ink:   #eef2f6;   /* primary text */
  --muted: #9fb0c1;   /* secondary text */
  --amber: #e8b676;   /* the "idea" — ties to the logo's lightbulb */
  --amber-deep: #d69a4f;
  --plate-hi: #fbf7ef;
  --plate-lo: #e7dbc4;

  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

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

body {
  min-height: 100svh;
  background: var(--bg-0);
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
               Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ==========================================================================
   Background — fixed behind everything so content can scroll on short screens
   ========================================================================== */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg > * { position: absolute; inset: 0; }

/* Deep radial grade (not a flat linear gradient) */
.bg-grade {
  background:
    radial-gradient(135% 100% at 50% -12%,
      var(--bg-3) 0%, var(--bg-2) 34%, var(--bg-1) 62%, var(--bg-0) 100%);
}

/* Two low-opacity blooms give depth without cliché */
.bg-bloom { will-change: transform; }
.bg-bloom--teal {
  background: radial-gradient(60% 48% at 50% 118%, rgba(30, 96, 132, 0.34), transparent 62%);
}
.bg-bloom--amber {
  background: radial-gradient(46% 40% at 86% 6%, rgba(232, 182, 118, 0.12), transparent 70%);
}

/* The moving light source — follows the cursor, screen-blended so it reads as light */
.bg-glow {
  background: radial-gradient(38vmax 38vmax at var(--gx) var(--gy),
    rgba(232, 182, 118, calc(0.10 + 0.10 * var(--lit))) 0%,
    rgba(120, 170, 205, 0.10) 28%,
    rgba(50, 104, 145, 0.05) 48%,
    transparent 66%);
  mix-blend-mode: screen;
}

/* Filmic grain — kills banding on the dark grade (inline SVG, no external asset) */
.bg-grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* Edge vignette to settle the composition */
.bg-vignette {
  background: radial-gradient(120% 120% at 50% 42%, transparent 58%, rgba(0, 0, 0, 0.55) 100%);
}

/* ==========================================================================
   Stage & depth planes
   ========================================================================== */
.scene {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(28px, 7vh, 96px) 22px calc(clamp(28px, 7vh, 96px) + env(safe-area-inset-bottom));
}

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 40rem;
}

.plane { will-change: transform; }
/* nearer plane (text) moves a touch less than the mark to protect legibility */
.plane--logo { transform: translate3d(calc(var(--px) * 16px), calc(var(--py) * 11px), 0); }
.plane--text { transform: translate3d(calc(var(--px) * 9px),  calc(var(--py) * 7px),  0); }

/* ==========================================================================
   The lantern (logo plate)
   ========================================================================== */
.lantern {
  position: relative;
  width: clamp(196px, 33vmin, 312px);
  aspect-ratio: 1 / 1;
  margin-bottom: clamp(30px, 5vh, 52px);
}

/* Cast shadow of the whole plate onto the dark scene — a pre-blurred layer we
   only TRANSLATE (composited), never re-blur per frame. */
.lantern__shadow {
  position: absolute;
  inset: 6%;
  border-radius: 28%;
  background: #000;
  filter: blur(34px);
  opacity: 0.5;
  transform: translate(calc(var(--px) * -26px), calc(var(--py) * -16px + 22px));
  z-index: -1;
}

/* Warm amber ambient halo behind the plate — static, tied to the logo's bulb */
.lantern::after {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: 34%;
  background: radial-gradient(closest-side, rgba(232, 182, 118, 0.22), transparent 72%);
  opacity: calc(0.45 + 0.55 * var(--lit));
  z-index: -1;
  pointer-events: none;
}

/* Specular rim that catches the moving light — sits just behind the plate so
   only a hairline peeks out; its bright arc rotates to the real pointer angle. */
.lantern__ring {
  position: absolute;
  inset: -2px;
  border-radius: 29%;
  background: conic-gradient(from calc(var(--ring) * 1deg),
    rgba(255, 244, 224, 0)   0deg,
    rgba(255, 240, 214, 0.9) 46deg,
    rgba(232, 182, 118, 0.2) 96deg,
    rgba(255, 244, 224, 0)   150deg,
    rgba(255, 244, 224, 0)   360deg);
  z-index: 0;
}

/* The lit plate — convex-lens read: top-left highlight, warm inner shadow */
.lantern__plate {
  position: absolute;
  inset: 0;
  border-radius: 27%;
  overflow: hidden;
  background:
    radial-gradient(128% 120% at 30% 22%,
      var(--plate-hi) 0%, #f3ebda 48%, var(--plate-lo) 100%);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.9),
    inset 0 10px 30px rgba(255, 242, 216, calc(0.30 + 0.35 * var(--lit))),
    inset 0 -22px 46px rgba(150, 110, 58, 0.20);
}

/* Mark cast shadow — a dark, blurred copy of the logo on the plate surface */
.lantern__cast,
.lantern__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72%;
  height: auto;
}
.lantern__cast {
  filter: brightness(0) blur(9px);
  opacity: 0.34;
  transform: translate(-50%, -50%) translate(calc(var(--px) * -9px), calc(var(--py) * -6px + 7px));
}
.lantern__mark {
  transform: translate(-50%, -50%);
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ==========================================================================
   Type
   ========================================================================== */
.headline {
  margin: 0;
  font-weight: 400;
  font-size: clamp(2.1rem, 6vw, 3.2rem);
  letter-spacing: 0.01em;
  line-height: 1.02;
  color: #f4f7fb;
  text-shadow:
    calc(var(--px) * -8px) calc(var(--py) * -6px + 3px) 16px rgba(0, 0, 0, 0.5),
    calc(var(--px) * -3px) calc(var(--py) * -2px + 1px) 5px  rgba(0, 0, 0, 0.35);
}
.headline em {
  font-style: italic;
  color: var(--amber);
}

.subline {
  margin: clamp(14px, 2.4vh, 22px) 0 0;
  font-style: italic;
  font-size: clamp(1rem, 2.4vw, 1.18rem);
  color: var(--muted);
  text-shadow: calc(var(--px) * -4px) calc(var(--py) * -3px + 2px) 10px rgba(0, 0, 0, 0.45);
}

.rule {
  width: 46px;
  height: 1px;
  margin: clamp(26px, 4.4vh, 40px) 0 clamp(22px, 3.4vh, 30px);
  background: linear-gradient(90deg, transparent, rgba(232, 182, 118, 0.7), transparent);
}

.name {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(0.82rem, 1.8vw, 0.98rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-indent: 0.16em;
  color: #dbe4ee;
  text-shadow: calc(var(--px) * -4px) calc(var(--py) * -3px + 2px) 9px rgba(0, 0, 0, 0.5);
}

.place {
  margin: 0.62em 0 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(0.66rem, 1.4vw, 0.76rem);
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: var(--amber);
  opacity: 0.85;
}

/* ==========================================================================
   Graceful degradation
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .bg-glow, .bg-bloom, .plane, .lantern__shadow, .lantern__cast,
  .headline, .subline, .name { transition: none !important; }
}

/* Touch / no-hover devices never get the JS effect; keep the composed still. */
@media (hover: none), (pointer: coarse) {
  .lantern__shadow { transform: translate(0, 20px); }
}