/* ==========================================================================
   Home hero — Senawa's ProjectCarousel (spec §2.2)

   Rule bodies are reference/senawa/project-carousel.css verbatim; only the
   CSS-module hashes were dropped from the selectors
   (.ProjectCarousel-module__LUcQ_q__bgImg -> .pc-bg-img, …).

   Four deliberate edits, all approved in the spec:

   1. .pc-page keeps height:100svh / position:relative / overflow:hidden but
      the page is NOT scroll-locked (no html.no-scroll), so .pc-bg, .pc-scrim
      and .pc-scrim-top are position:absolute instead of fixed — otherwise
      they would follow the viewport down past the hero.
   2. .pc-bg-img-inner gets the box next/image's `fill` supplied for free
      (absolute, inset 0, 100%/100%) plus a height:100% that beats the base
      `img { height:auto }` rule in style.css.
   3. .pc-scroll-cue is an addition, not Senawa's — values from spec §2.2.
   4. The crosshair (site/css/crosshair.css) lives between the scrims and the
      surface, so nothing here may claim z-index 1 or 2 for anything else:
      bg 0, scrims 1, crosshair 1, surface 2, baseline/cue 3.
   ========================================================================== */

.pc-page{background-color:var(--slate);width:100%;height:100svh;position:relative;overflow:hidden}
.pc-bg{z-index:0;background-color:var(--slate);position:absolute;inset:0}
.pc-bg-img{opacity:0;transition:opacity var(--duration-slow) var(--ease-out);position:absolute;inset:0}
.pc-bg-img[data-active]{opacity:1}
.pc-bg-img-inner{object-fit:cover;opacity:0;transition:opacity var(--duration-mid) var(--ease-out);position:absolute;inset:0;width:100%;height:100%;max-width:none}
.pc-bg-img[data-loaded] .pc-bg-img-inner{opacity:1}
.pc-scrim{z-index:1;pointer-events:none;background:linear-gradient(to top, rgba(var(--scrim-ink), .92) 0%, rgba(var(--scrim-ink), .56) 42%, rgba(var(--scrim-ink), 0) 70%);height:48vh;position:absolute;bottom:0;left:0;right:0}
.pc-scrim-top{z-index:1;pointer-events:none;background:linear-gradient(to bottom, rgba(var(--scrim-ink), .5), rgba(var(--scrim-ink), 0));height:20vh;position:absolute;top:0;left:0;right:0}
.pc-surface{z-index:2;cursor:grab;touch-action:none;position:absolute;inset:0}
.pc-surface.pc-dragging{cursor:grabbing}
.pc-carousel{padding-bottom:max(clamp(56px, 9vh, 92px), calc(env(safe-area-inset-bottom) + 32px));position:absolute;bottom:0;left:0;right:0}
.pc-viewport{outline:none;width:100%;position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 13% 87%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 13% 87%,#0000 100%)}
.pc-viewport:focus-visible{outline:2px solid var(--wool);outline-offset:-2px;box-shadow:inset 0 0 0 3px var(--slate)}
.pc-track{align-items:flex-end;gap:calc(clamp(44px, 8vw, 132px) + var(--strip-gap,0px));will-change:transform;visibility:hidden;width:max-content;transition:transform var(--duration-slow) var(--ease-out);display:flex;transform:translate(0)}
.pc-track[data-ready]{visibility:visible}
.pc-track.pc-dragging{transition:none}
.pc-item{min-height:44px;color:var(--wool);text-align:center;opacity:.5;transition:opacity var(--duration-mid) var(--ease-out);-webkit-user-select:none;user-select:none;flex-direction:column;flex:none;justify-content:center;align-items:center;gap:4px;padding:10px;text-decoration:none;display:flex}
.pc-item[data-active]{opacity:1}
.pc-item:focus-visible{outline:1px solid var(--wool);outline-offset:6px;border-radius:2px}
.pc-item-title{font-family:var(--font-display);letter-spacing:.01em;white-space:nowrap;padding-bottom:2px;font-size:12px;font-weight:400;line-height:1.15}
.pc-item[data-active] .pc-item-title{transition:background-size var(--duration-mid) var(--ease-out);background-image:linear-gradient(currentColor,currentColor);background-position:0 100%;background-repeat:no-repeat;background-size:0 1px;font-weight:600}
.pc-item[data-active]:hover .pc-item-title,.pc-item[data-active]:focus-visible .pc-item-title{background-size:100% 1px}
.pc-item-meta{font-family:var(--font-body);letter-spacing:.16em;font-size:8px;font-weight:400;line-height:var(--leading-tight);text-transform:uppercase;white-space:nowrap;font-variant-numeric:tabular-nums}
.pc-meta-rule{opacity:.5;background-color:currentColor;width:1px;height:.72em;margin:0 .55em;display:inline-block}
.pc-baseline{z-index:3;pointer-events:none;height:3px;position:absolute;bottom:clamp(24px,4vh,38px);left:clamp(24px,5vw,60px);right:clamp(24px,5vw,60px)}
.pc-baseline:before{content:"";background:#f6f2eb57;height:1px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}
.pc-progress{transform-origin:0;width:100%;transition:transform var(--duration-slow) var(--ease-out);will-change:transform;background:#f6f2ebf2;position:absolute;top:0;bottom:0;left:0}

/* ----------------------------------------------------------- scroll cue --
   Addition (spec §2.2): bottom-right, on the same right margin as the
   baseline hairline and clear of the name strip above it. Text only — the
   animated vertical rule this used to carry reached up into .pc-viewport and
   struck through the project titles. Hidden on phones, where the strip
   already fills the bottom of the frame. */
.pc-scroll-cue{z-index:3;-webkit-appearance:none;appearance:none;background:none;border:0;margin:0;padding:0;font:inherit;font-family:var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--wool);opacity:.6;font-size:8px;font-weight:400;line-height:var(--leading-tight);white-space:nowrap;cursor:pointer;transition:opacity var(--duration-fast) var(--ease-out);position:absolute;right:clamp(24px,5vw,60px);bottom:calc(clamp(24px,4vh,38px) + 12px)}
.pc-scroll-cue:hover,.pc-scroll-cue:focus-visible{opacity:1}
.pc-scroll-cue:focus-visible{outline:1px solid var(--wool);outline-offset:6px}
@media (max-width:767px){.pc-scroll-cue{display:none}}


/* =========================================================================
   First-visit preloader (spec §1.5)

   Senawa's Preloader CSS module, de-hashed (.imageFrame -> .pl-frame, …);
   the component it drives is reference/senawa/preloader.component.js and the
   JS port lives in site/js/hero-carousel.js (initPreloader).

   One deviation: the TIC wordmark is a dark raster, not a currentColor SVG,
   so where Senawa's mark simply inherits the ink we flip ours to white for
   the settle — it lands on the nav's wordmark, which over the hero photo is
   `filter:brightness(0) invert(1)` (style.css, .nav--dark). Without the flip
   the hand-off would swap a dark mark for a white one at the last frame.
   ========================================================================= */
.pl{z-index:var(--z-preloader);background:var(--wool);position:fixed;inset:0}
.pl-frame{border-radius:var(--radius-sm);width:min(440px,78vw);height:min(300px,52vh);transition:width .56s var(--ease-settle),height .56s var(--ease-settle),border-radius .56s var(--ease-settle);will-change:width,height;z-index:1;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}
.pl-slot{opacity:0;transition:opacity .12s ease-in-out;position:absolute;inset:0}
.pl-slot.is-active{opacity:1}
.pl-slot-img{object-fit:cover;width:100%;height:100%;max-width:none}
.pl-overlay{z-index:2;background:linear-gradient(to top, rgba(var(--scrim-ink), .82) 0%, rgba(var(--scrim-ink), .25) 42%, rgba(var(--scrim-ink), 0) 70%);opacity:0;transition:opacity .56s var(--ease-settle);pointer-events:none;position:absolute;inset:0}
.pl.is-settling .pl-overlay,.pl.is-exiting .pl-overlay{opacity:1}
.pl-wordmark{transition:transform .56s var(--ease-settle);will-change:transform;z-index:3;position:absolute;top:calc(50vh + 176px);left:50%;transform:translate(-50%)}
.pl-wordmark img{width:auto;height:40px;transition:filter .56s var(--ease-settle)}
.pl.is-settling .pl-wordmark img,.pl.is-exiting .pl-wordmark img{filter:brightness(0) invert(1)}
.pl.is-exiting{opacity:0;pointer-events:none;transition:opacity .45s ease-out}
@media (max-width:767px){.pl-frame{width:80vw;height:42vh}.pl-wordmark{top:calc(71vh + 26px)}}
@media (max-width:359px){.pl-wordmark img{height:24px}}
@media (prefers-reduced-motion:reduce){.pl,.pl-frame,.pl-slot,.pl-overlay,.pl-wordmark,.pl-wordmark img{transition:none!important}}