/* ============================================================
   VERNADOON · TRUE 3D DESK
   World coordinates: X right, Y down, Z toward viewer.
   ============================================================ */

.desk-world {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateX(0deg);
  will-change: transform;
}

.desk-3d {
  position: absolute;
  transform-style: preserve-3d;
}

/* ---------- desktop ----------
   NOTE: no repeating-stripe pattern; that caused a visible horizontal line
   through the paper when the desk plane flipped to face the camera.
*/
.desk-top {
  position: absolute;
  left: -380px;
  top: -210px;
  width: 760px;
  height: 420px;
  transform-style: preserve-3d;
  transform: rotateX(90deg);
  transform-origin: center center;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(255,140,63,.06), transparent 60%),
    linear-gradient(145deg, #2a1a0f 0%, #1a0f08 55%, #120a05 100%);
  border-radius: 4px;
  box-shadow:
    inset 0 2px 0 rgba(201,169,98,.15),
    0 0 80px rgba(255,140,63,.18);
}

/* ---------- front face ---------- */
.desk-front {
  position: absolute;
  left: -380px;
  top: 0;
  width: 760px;
  height: 22px;
  background: linear-gradient(to bottom, #1a0f08, #0a0604);
  box-shadow: inset 0 -4px 12px rgba(0,0,0,.6);
  transform: translateZ(210px);
}

/* ---------- legs ---------- */
.leg3d {
  position: absolute;
  width: 20px;
  height: 200px;
  background: linear-gradient(to right,
    color-mix(in srgb, #2a1a0f 50%, #000),
    #2a1a0f 40%,
    #3a2418 60%,
    color-mix(in srgb, #2a1a0f 55%, #000));
  box-shadow: 0 0 14px rgba(0,0,0,.75);
  top: 22px;
}
.leg3d-fl { left: -370px; transform: translateZ( 210px);  }
.leg3d-fr { left:  350px; transform: translateZ( 210px);  }
.leg3d-bl { left: -370px; transform: translateZ(-210px); filter: brightness(.72); }
.leg3d-br { left:  350px; transform: translateZ(-210px); filter: brightness(.72); }

/* ==========================================================
   OBJECTS ON DESKTOP (children of .desk-top — co-planar)
   ========================================================== */

/* paper stack — centered on desktop, slight tilt for character.
   transform-style flat + translateZ(0) keeps text rendered on a single
   compositing layer so it stays pixel-crisp through 3D rotations. */
.paper-stack {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 520px;
  height: 360px;
  transform: translate(-50%, -50%) rotate(-1.6deg);
  transform-style: flat;
  will-change: transform;
}

/* pen — sits diagonally across the bottom-right of the paper.
   True 3D cylinder: 24 faces at 15° increments, radius 5px.
   translateZ(-5px) lifts center so bottom rests on desk surface. */
.pen-3d {
  position: absolute;
  right: 40px;
  bottom: 220px;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translateZ(5px) rotate(38deg);
  transform-origin: top center;
  z-index: 5;
}
/* 24 faces — sub-pixel width ensures no visible seams */
.pen-3d .pen-face {
  position: absolute;
  left: -3px;
  top: 0;
  width: 6px;
  height: 160px;
  background: linear-gradient(to right,
    rgba(0,0,0,.15) 0%, rgba(255,240,220,.08) 50%, rgba(0,0,0,.15) 100%),
    linear-gradient(to bottom,
      #6a5a40 0%, #b8a278 5%, #efe6d3 50%, #b8a278 95%, #6a5a40 100%);
}
/* 24 faces with cosine brightness shading: 0.55 + 0.45*cos(i*15°) */
.pen-3d .pf-0  { transform: rotateY(  0deg) translateZ(5px); }
.pen-3d .pf-1  { transform: rotateY( 15deg) translateZ(5px); filter: brightness(.98); }
.pen-3d .pf-2  { transform: rotateY( 30deg) translateZ(5px); filter: brightness(.94); }
.pen-3d .pf-3  { transform: rotateY( 45deg) translateZ(5px); filter: brightness(.87); }
.pen-3d .pf-4  { transform: rotateY( 60deg) translateZ(5px); filter: brightness(.78); }
.pen-3d .pf-5  { transform: rotateY( 75deg) translateZ(5px); filter: brightness(.67); }
.pen-3d .pf-6  { transform: rotateY( 90deg) translateZ(5px); filter: brightness(.55); }
.pen-3d .pf-7  { transform: rotateY(105deg) translateZ(5px); filter: brightness(.67); }
.pen-3d .pf-8  { transform: rotateY(120deg) translateZ(5px); filter: brightness(.78); }
.pen-3d .pf-9  { transform: rotateY(135deg) translateZ(5px); filter: brightness(.87); }
.pen-3d .pf-10 { transform: rotateY(150deg) translateZ(5px); filter: brightness(.94); }
.pen-3d .pf-11 { transform: rotateY(165deg) translateZ(5px); filter: brightness(.98); }
.pen-3d .pf-12 { transform: rotateY(180deg) translateZ(5px); filter: brightness(.55); }
.pen-3d .pf-13 { transform: rotateY(195deg) translateZ(5px); filter: brightness(.98); }
.pen-3d .pf-14 { transform: rotateY(210deg) translateZ(5px); filter: brightness(.94); }
.pen-3d .pf-15 { transform: rotateY(225deg) translateZ(5px); filter: brightness(.87); }
.pen-3d .pf-16 { transform: rotateY(240deg) translateZ(5px); filter: brightness(.78); }
.pen-3d .pf-17 { transform: rotateY(255deg) translateZ(5px); filter: brightness(.67); }
.pen-3d .pf-18 { transform: rotateY(270deg) translateZ(5px); filter: brightness(.55); }
.pen-3d .pf-19 { transform: rotateY(285deg) translateZ(5px); filter: brightness(.67); }
.pen-3d .pf-20 { transform: rotateY(300deg) translateZ(5px); filter: brightness(.78); }
.pen-3d .pf-21 { transform: rotateY(315deg) translateZ(5px); filter: brightness(.87); }
.pen-3d .pf-22 { transform: rotateY(330deg) translateZ(5px); filter: brightness(.94); }
.pen-3d .pf-23 { transform: rotateY(345deg) translateZ(5px); filter: brightness(.98); }

/* end cap — top (eraser end) */
.pen-3d .pen-cap-top {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #efe6d3 0%, #b8a278 50%, #6a5a40 100%);
  transform: rotateX(90deg);
  transform-origin: center bottom;
}
/* end cap — bottom (nib end) */
.pen-3d .pen-cap-btm {
  position: absolute;
  left: -5px;
  top: 160px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3a2418;
  transform: rotateX(-90deg);
  transform-origin: center top;
}
/* nib — tapered cone: two crossed triangular planes centered at cylinder end */
.pen-3d .pen-nib {
  position: absolute;
  left: 0;
  top: 162px;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}
.pen-3d .pen-nib::before,
.pen-3d .pen-nib::after {
  content: '';
  position: absolute;
  left: -5px;
  top: 0;
  width: 10px;
  height: 22px;
  background: linear-gradient(to bottom, #3a2418 0%, #1a0f05 60%, #0a0502 100%);
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
.pen-3d .pen-nib::before { transform: rotateY(0deg); }
.pen-3d .pen-nib::after { transform: rotateY(90deg); }

/* ferrule — brass ring at body/nib junction, front-facing */
.pen-3d .pen-ferrule {
  position: absolute;
  left: -6px;
  top: 158px;
  width: 12px;
  height: 5px;
  background: linear-gradient(to right, #4a3a20, #c9a962 30%, #ffe0a0 50%, #c9a962 70%, #4a3a20);
  border-radius: 2px;
  transform: translateZ(5.5px);
}

/* ==========================================================
   STANDING OBJECTS — TRUE 3D
   ========================================================== */

/* ----- CANDLE -----
   Octagonal prism (8 vertical faces) — but the FRONT face carries a
   horizontal shading gradient that simulates the curvature of a cylinder,
   so it reads as 3D even when viewed straight-on (side view).
*/
.candle {
  position: absolute;
  left: 105px;
  top: 50px;
  width: 0;
  height: 0;
  --sway: 0;
  transform-style: preserve-3d;
  transform: rotateX(90deg);
}
/* octagonal faces — each carries BOTH vertical wax gradient AND horizontal
   curvature shading so the front face looks round, not flat. */
.candle .face {
  position: absolute;
  left: -11px;
  top: 0;
  width: 22px;
  height: 110px;
  background:
    /* horizontal curvature: darker at left & right edges, lit in center */
    linear-gradient(to right,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.25) 15%,
      rgba(255,240,200,.18) 45%,
      rgba(255,240,200,.25) 55%,
      rgba(0,0,0,.25) 85%,
      rgba(0,0,0,.55) 100%),
    /* vertical wax shape: dark base (Y=0, bottom after rotation) to lit top (Y=110, top after rotation) */
    linear-gradient(to bottom,
      #6a5025 0%, #a88048 25%, #d8b972 70%, #efe0b8 100%);
  box-shadow: inset 0 6px 10px rgba(0,0,0,.5);
}
.candle .face-0 { transform: rotateY(  0deg) translateZ(11px); }
.candle .face-1 { transform: rotateY( 45deg) translateZ(11px); filter: brightness(.92); }
.candle .face-2 { transform: rotateY( 90deg) translateZ(11px); filter: brightness(.78); }
.candle .face-3 { transform: rotateY(135deg) translateZ(11px); filter: brightness(.68); }
.candle .face-4 { transform: rotateY(180deg) translateZ(11px); filter: brightness(.6); }
.candle .face-5 { transform: rotateY(225deg) translateZ(11px); filter: brightness(.68); }
.candle .face-6 { transform: rotateY(270deg) translateZ(11px); filter: brightness(.78); }
.candle .face-7 { transform: rotateY(315deg) translateZ(11px); filter: brightness(.92); }

/* top disc — wax pool at the top, visible when viewed from above */
.candle .top-disc {
  position: absolute;
  left: -13px;
  top: 110px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 45% 40%, #fff1c8 0%, #e8c878 35%, #a08048 75%, #5a3a18 98%);
  transform: rotateX(-90deg) translateY(-13px);
  transform-origin: top center;
  box-shadow: 0 0 8px rgba(0,0,0,.5);
}
/* bottom disc — caps the base at desk surface */
.candle .bottom-disc {
  position: absolute;
  left: -13px;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #3a2010;
  transform: rotateX(-90deg) translateY(-13px);
  transform-origin: top center;
}

/* wick */
.candle .wick {
  position: absolute;
  left: -1px;
  top: 110px;
  width: 2px;
  height: 12px;
  background: linear-gradient(to bottom, #c44a0c 0%, #3a1508 60%, #1a0a03 100%);
  border-radius: 1px;
}

/* flame: 12 elliptical slices rotated around Y axis to form a 3D bulb.
   Each slice is a tall ellipse (border-radius:50%) with a flame gradient.
   Overlapping translucent ellipses create a smooth volumetric teardrop. */
.candle .flame {
  position: absolute;
  left: 0;
  top: 122px;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  animation: flameSway 3.5s ease-in-out infinite alternate;
}
.candle .flame .flame-slice {
  position: absolute;
  left: -7px;
  top: -28px;
  width: 14px;
  height: 28px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 50% 75%,
    rgba(255,245,200,.95) 0%,
    rgba(255,204,102,.7) 25%,
    rgba(255,140,63,.45) 50%,
    rgba(196,74,12,.2) 75%,
    transparent 100%);
  filter: blur(.5px);
  opacity: 0.7;
  animation: flameFlicker 1.8s ease-in-out infinite;
}
/* 12 slices at 15° increments — full 180° coverage (back halves mirror via transparency) */
.candle .flame .fs-0  { transform: rotateY(  0deg); }
.candle .flame .fs-1  { transform: rotateY( 15deg); }
.candle .flame .fs-2  { transform: rotateY( 30deg); }
.candle .flame .fs-3  { transform: rotateY( 45deg); }
.candle .flame .fs-4  { transform: rotateY( 60deg); }
.candle .flame .fs-5  { transform: rotateY( 75deg); }
.candle .flame .fs-6  { transform: rotateY( 90deg); }
.candle .flame .fs-7  { transform: rotateY(105deg); }
.candle .flame .fs-8  { transform: rotateY(120deg); }
.candle .flame .fs-9  { transform: rotateY(135deg); }
.candle .flame .fs-10 { transform: rotateY(150deg); }
.candle .flame .fs-11 { transform: rotateY(165deg); }

/* halo: screen-space overlay positioned by JS — lives outside 3D context
   so it always faces the viewer with no edge artifacts */
.candle-halo-screen {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(255,140,63,.22) 0%,
    rgba(255,140,63,.08) 35%,
    transparent 65%);
  pointer-events: none;
  z-index: 10;
  transform: translate(-50%, -50%);
  will-change: left, top;
}

/* candle glow on desk surface — flat circle visible from above */
.candle-glow {
  position: absolute;
  left: 50px;
  top: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(255,140,63,.15) 0%,
    rgba(255,140,63,.06) 40%,
    transparent 70%);
  pointer-events: none;
}

@keyframes flameSway {
  0%   { transform: translateX(calc(var(--sway,0) * 2px)) rotate(calc(var(--sway,0) * -1deg)); }
  100% { transform: translateX(calc(var(--sway,0) * 2px + 1px)) rotate(calc(var(--sway,0) * -1deg + 1.5deg)); }
}
@keyframes flameFlicker {
  0%, 100% { opacity: .65; filter: blur(.5px) brightness(1); }
  50%      { opacity: .8;  filter: blur(.3px) brightness(1.2); }
}

/* ----- INKWELL -----
   Proper 3D bottle: tapered body (wider bottom, narrower neck) with
   rim highlight and a dark ink pool inside.
   Built as 4 vertical side planes + a beveled top ring + a deep ink well.
*/
.inkwell-3d {
  position: absolute;
  left: 580px;
  top: 60px;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateX(90deg) rotateY(4deg) scale(0.78);
}

.inkwell-3d .ink-face {
  position: absolute;
  transform-origin: center center;
  /* body gradient: brass rim highlight on top, dark body, heavier base */
  background: linear-gradient(to bottom,
    #3a2a18 0%,
    #2a1810 8%,
    #1a0d08 20%,
    #120804 60%,
    #060301 100%);
  box-shadow:
    inset 0 2px 3px rgba(201,169,98,.35),
    inset 0 -4px 8px rgba(0,0,0,.7);
}
/* front */
.inkwell-3d .ink-front {
  left: -24px; top: 0; width: 48px; height: 44px;
  transform: translateZ(18px);
}
/* back */
.inkwell-3d .ink-back {
  left: -24px; top: 0; width: 48px; height: 44px;
  transform: translateZ(-18px) rotateY(180deg);
  filter: brightness(.55);
}
/* left */
.inkwell-3d .ink-left {
  left: -18px; top: 0; width: 36px; height: 44px;
  transform: rotateY(-90deg) translateZ(24px);
  filter: brightness(.72);
}
/* right */
.inkwell-3d .ink-right {
  left: -18px; top: 0; width: 36px; height: 44px;
  transform: rotateY(90deg) translateZ(24px);
  filter: brightness(.85);
}
/* top rim — shows as a slight brass ellipse with the ink well recessed inside */
.inkwell-3d .ink-top {
  position: absolute;
  left: -24px; top: 44px; width: 48px; height: 36px;
  background:
    /* outer rim highlight */
    radial-gradient(ellipse at 50% 50%,
      transparent 48%,
      rgba(201,169,98,.4) 55%,
      rgba(201,169,98,.15) 62%,
      transparent 70%),
    /* dark recess */
    radial-gradient(ellipse at 50% 50%,
      #000 0%, #0a0503 30%, #1a0d08 48%, #2a1a10 58%, #3a2418 72%);
  transform: rotateX(-90deg) translateY(-18px);
  transform-origin: top center;
  border-radius: 50%;
  box-shadow: inset 0 0 6px rgba(0,0,0,.7);
}
/* ink pool in the center — very dark, slightly glossy */
.inkwell-3d .ink-top::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 22px; height: 16px;
  background:
    radial-gradient(ellipse at 45% 35%, rgba(40,60,100,.25) 0%, transparent 30%),
    radial-gradient(ellipse, #000 30%, #050204 70%, #0a0503 100%);
  border-radius: 50%;
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,.9),
    inset 0 -1px 1px rgba(40,40,60,.2);
}
/* flat rectangular fill under the round disc to cover wall gaps */
.inkwell-3d .ink-fill {
  position: absolute;
  left: -24px; top: 44px; width: 48px; height: 36px;
  background: #1a0d08;
  transform: rotateX(-90deg) translateY(-18px);
  transform-origin: top center;
}

/* ==========================================================
   MOBILE 3D OVERRIDES (max-width: 840px)
   Zoomed-in framing: desk extends off horizontal edges,
   portrait paper dominates screen, candle/pen/inkwell frame
   it at upper corners. NO ancestor scale on .desk-world —
   that would rasterize text at reduced resolution and cause
   the horizontal glyph squish bug we fought before.
   ========================================================== */
@media (max-width: 840px) {

  /* Desk-top grows vertically to accommodate the portrait paper
     sitting flush on its surface. Width stays at 760px — desk
     edges overflow viewport by design (creates intimacy / focus
     on center region). */
  .desk-top {
    top: -280px;
    height: 560px;
  }

  /* Desk-front translateZ must match half of desk-top height so
     the front panel sits at the desk's front edge.
     Desktop: translateZ(210) = 420/2. Mobile: 280 = 560/2. */
  .desk-front {
    transform: translateZ(280px);
  }

  /* Legs' translateZ also tracks half of desk-top height. */
  .leg3d-fl, .leg3d-fr { transform: translateZ(280px); }
  .leg3d-bl { transform: translateZ(-280px); filter: brightness(.72); }
  .leg3d-br { transform: translateZ(-280px); filter: brightness(.72); }

  /* Paper-stack: portrait orientation 320×520, widened so paper spans
     from just right of the candle to the mirrored position on the right.
     At reading position (camera scale 1.131) renders at 362×588 —
     fills 97% viewport width, 88% height on iPhone SE. */
  .paper-stack {
    width: 320px;
    height: 520px;
  }

  /* Candle: upper-left of portrait paper. */
  .candle {
    left: 175px;
    top: 100px;
  }
  .candle-glow {
    left: 120px;
    top: 20px;
  }

  /* Inkwell: upper-right of portrait paper. */
  .inkwell-3d {
    left: 530px;
    top: 70px;
  }

  /* Pen: diagonal along lower-right of paper. */
  .pen-3d {
    right: 90px;
    bottom: 280px;
  }

  /* Flame blur removal — saves 12 per-frame Gaussian blur ops on mobile */
  .candle .flame .flame-slice {
    filter: none;
  }
}

/* ==========================================================
   SMALLEST VIEWPORTS (max-width: 420px)
   Shrink paper by 20px on all sides so it fits comfortably
   on iPhone SE and narrower devices with visible desk margin.
   ========================================================== */
@media (max-width: 420px) {
  .paper-stack {
    width: 280px;
    height: 480px;
  }
}

/* ==========================================================
   MOBILE LANDSCAPE (short-height phones only)
   Gated on max-height:500px (not orientation:landscape) so
   that a resized desktop browser window — which might be
   landscape-oriented but tall enough for the portrait layout
   — doesn't incorrectly get the landscape compressed layout.
   Short-height phone-landscape still gets these overrides.
   ========================================================== */
@media (max-width: 840px) and (max-height: 500px) {
  .desk-top {
    top: -180px;
    height: 360px;
  }
  .desk-front {
    transform: translateZ(180px);
  }
  .leg3d-fl, .leg3d-fr { transform: translateZ(180px); }
  .leg3d-bl { transform: translateZ(-180px); filter: brightness(.72); }
  .leg3d-br { transform: translateZ(-180px); filter: brightness(.72); }

  .paper-stack {
    width: 420px;
    height: 260px;
  }

  .candle { left: 105px; top: 50px; }
  .candle-glow { left: 50px; top: -30px; }
  .inkwell-3d { left: 580px; top: 60px; }
  .pen-3d { right: 40px; bottom: 200px; }
}