/* ============================================================
   Green & Bisque — redesign SHARED BASE
   Color + type live in each direction's theme file.
   This file = reset, layout primitives, scroll-motion engine,
   image-slot framing, marquee, rotating stamp. No palette here.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}
body{margin:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;}
img,svg{max-width:100%;display:block;}
figure{margin:0;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;}
h1,h2,h3,h4,h5{margin:0;font-weight:inherit;line-height:1;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}

:root{
  --maxw:1320px;
  --gutter:clamp(22px,5vw,90px);
}

/* layout primitives */
.shell{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.shell--wide{max-width:1620px;}
.shell--narrow{max-width:880px;}
.section{position:relative;}
.stack > * + *{margin-top:var(--stack,1em);}

/* ============================================================
   Scroll-motion engine  (IntersectionObserver toggles .is-in)
   data-reveal="up|fade|left|right|scale|clip"  ·  --d = stagger delay
   ============================================================ */
[data-reveal]{
  --d:0ms; --dur:1100ms;
  opacity:0;
  transition:opacity var(--dur) cubic-bezier(.2,.7,.2,1) var(--d),
             transform var(--dur) cubic-bezier(.2,.7,.2,1) var(--d),
             clip-path var(--dur) cubic-bezier(.2,.7,.2,1) var(--d);
  will-change:opacity,transform;
}
[data-reveal="up"]{transform:translateY(38px);}
[data-reveal="left"]{transform:translateX(-46px);}
[data-reveal="right"]{transform:translateX(46px);}
[data-reveal="scale"]{transform:scale(.93);}
[data-reveal="clip"]{clip-path:inset(0 0 100% 0);}
[data-reveal].is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0);}

/* line-by-line headline reveal */
.lines{display:block;}
.lines .ln{display:block;overflow:hidden;}
.lines .ln > span{display:block;transform:translateY(110%);
  transition:transform 1000ms cubic-bezier(.16,.84,.27,1) var(--d);}
.lines.is-in .ln > span{transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1 !important;transform:none !important;clip-path:none !important;transition:none;}
  .lines .ln > span{transform:none !important;transition:none;}
  .marquee__row{animation:none !important;}
  .stamp{animation:none !important;}
}

/* kill switch — when frames aren't flowing (frozen/background iframe), JS adds
   html.anim-off and everything snaps to its final visible state, never stuck blank */
html.anim-off [data-reveal],
html.anim-off .lines .ln > span{opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important;}

/* ============================================================
   Marquee (clay-term ticker / running rule)
   ============================================================ */
.marquee{overflow:hidden;width:100%;}
.marquee__row{display:flex;width:max-content;animation:marq var(--mspeed,38s) linear infinite;}
.marquee__row > *{flex:none;}
.marquee:hover .marquee__row{animation-play-state:paused;}
@keyframes marq{to{transform:translateX(-50%);}}

/* ============================================================
   Rotating circular stamp
   ============================================================ */
.stamp{animation:spin var(--sspeed,22s) linear infinite;transform-origin:center;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ============================================================
   image-slot framing — neutral; theme files set colors
   ============================================================ */
image-slot{display:block;width:100%;height:100%;}
.figure{position:relative;}
.figure__cap{position:absolute;left:0;bottom:0;
  font-family:var(--ui,monospace);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 11px;transform:translateY(100%);margin-top:9px;}

/* utility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.nowrap{white-space:nowrap;}
.italic{font-style:italic;}
@media print{[data-reveal]{opacity:1 !important;transform:none !important;}}