/* ============================================================================
   Idealize Immersion Layer  ·  v1
   Additive enhancements on top of the existing page. Nothing here is required
   for the site to work: delete the two tags in index.html and the page is
   exactly as it was. Everything is gated on a fine pointer, a desktop-width
   viewport, and prefers-reduced-motion:no-preference.

     1. Work peek      - the Shipped list stops being a text list. Project
                         imagery follows the cursor, unhovered rows recede.
     2. Living coast   - the wave dividers between chapters drift like water,
                         speed driven by scroll velocity. Ties El Morro, the
                         island positioning and the existing wave masks into
                         one idea instead of three unrelated flourishes.
     3. Rail legibility- the fixed section-nav no longer competes with the 3D
                         mark that parks in the same corner.
   ========================================================================== */

/* ---------- 1. WORK PEEK --------------------------------------------------- */
.imx-peek{
  position:fixed; top:0; left:0; z-index:26;
  width:clamp(230px,20vw,330px); aspect-ratio:4/3;
  border-radius:14px; overflow:hidden;
  pointer-events:none; opacity:0;
  transform:translate3d(-50%,-50%,0) scale(.9) rotate(var(--imx-r,0deg));
  transition:opacity .42s cubic-bezier(.16,1,.3,1), scale .42s cubic-bezier(.16,1,.3,1);
  box-shadow:0 30px 70px -28px rgba(46,46,46,.62), 0 0 0 1px rgba(46,46,46,.07);
  background:var(--surface,#f1ece6);
  will-change:transform,opacity;
}
.imx-peek.on{opacity:1; scale:1}
.imx-peek img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0; transition:opacity .34s cubic-bezier(.16,1,.3,1);
}
.imx-peek img.on{opacity:1}
/* a hairline of the brand rosewood so the plate reads as ours, not a stock frame */
.imx-peek::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(241,236,230,.30);
}

/* rows recede while a sibling is hovered - focus, not decoration */
.work-body.imx-focus .prj{transition:opacity .38s cubic-bezier(.16,1,.3,1), transform .38s cubic-bezier(.16,1,.3,1)}
.work-body.imx-focus .prj:not(:hover){opacity:.38}
.work-body.imx-focus .prj:hover{transform:translateX(10px)}

/* ---------- 2. LIVING COAST ------------------------------------------------ */
/* The wave masks already exist. This retiles them so they can travel, and the
   JS drives --imx-wv. Opposite drift top vs bottom reads as a current. */
html.imx-coast .chapter-wine,
html.imx-coast .chapter-ink{
  -webkit-mask-repeat:repeat-x,no-repeat,repeat-x;
          mask-repeat:repeat-x,no-repeat,repeat-x;
  -webkit-mask-position:calc(var(--imx-wv,0) * 1px) top, center, calc(var(--imx-wv,0) * -1px) bottom;
          mask-position:calc(var(--imx-wv,0) * 1px) top, center, calc(var(--imx-wv,0) * -1px) bottom;
}
html.imx-coast .contact{
  -webkit-mask-repeat:repeat-x,no-repeat;
          mask-repeat:repeat-x,no-repeat;
  -webkit-mask-position:calc(var(--imx-wv,0) * 1px) top, bottom;
          mask-position:calc(var(--imx-wv,0) * 1px) top, bottom;
}

/* ---------- 3. RAIL LEGIBILITY -------------------------------------------- */
/* The 3D mark drifts to the top-right and passes behind the section rail. The rail
   already wins on z-index (45 over 30), so this was never an occlusion problem, only
   a contrast one: pale gold labels over a bright glass mark.
   Two earlier attempts were worse than the disease. A tinted panel behind the rail
   read as a floating UI box on the wine chapter, and swapping it for a backdrop blur
   smeared whatever else sat under the rail, including the third process card's
   heading. Both were fixing the background when the problem is the foreground.
   So: leave everything behind the rail alone and give the rail's own glyphs a halo. */
.secnav.imx-guard .lbl{
  text-shadow:0 0 10px var(--bg,#ddd5cd), 0 0 4px var(--bg,#ddd5cd);
}
.secnav.on-dark.imx-guard .lbl{
  text-shadow:0 0 10px rgba(20,20,20,.92), 0 0 4px rgba(20,20,20,.92);
}
.secnav.imx-guard a .d{
  box-shadow:0 0 0 3px var(--bg,#ddd5cd);
}
.secnav.on-dark.imx-guard a .d{
  box-shadow:0 0 0 3px rgba(20,20,20,.85);
}
/* the active dot keeps its own accent ring, drawn outside the halo */
.secnav.imx-guard a.active .d{
  box-shadow:0 0 0 3px var(--bg,#ddd5cd), 0 0 0 6px rgba(125,64,71,.22);
}
.secnav.on-dark.imx-guard a.active .d{
  box-shadow:0 0 0 3px rgba(20,20,20,.85), 0 0 0 6px rgba(208,167,172,.22);
}

/* ---------- honour the user ----------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .imx-peek{display:none}
  .work-body.imx-focus .prj:not(:hover){opacity:1}
  .work-body.imx-focus .prj:hover{transform:none}
  html.imx-coast .chapter-wine,
  html.imx-coast .chapter-ink,
  html.imx-coast .contact{
    -webkit-mask-position:top,center,bottom; mask-position:top,center,bottom;
  }
}
@media (max-width:767px),(hover:none){
  .imx-peek{display:none}
}