/* Showcase sections — full-screen, image-free effect panels ---------------- */

.show {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 var(--pad);
  overflow: hidden;
  isolation: isolate;
}

/* Effect canvas sits behind the copy, filling the section. */
.show .fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* Copy overlay -------------------------------------------------------------- */
.show__copy {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  pointer-events: none;
}
.show__copy .accent { color: var(--accent); }
.show__copy h2 {
  font-size: var(--h2);
  max-width: 15ch;
  text-shadow: 0 2px 40px rgba(0,0,0,.55);
}
.show__copy p {
  margin-top: 18px;
  max-width: 46ch;
  /* match the hero body line: small-caps Unbounded, dimmer white */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  text-shadow: 0 1px 24px rgba(0,0,0,.6);
}

/* Right-aligned variant — alternate the eye across sections. */
.show--right { justify-content: flex-end; }
.show--right .show__copy { text-align: right; }
.show--right .show__copy h2,
.show--right .show__copy p { margin-left: auto; }

/* Bottom-anchored copy (used under kinetic type). */
.show__copy--btm {
  position: absolute;
  left: var(--pad);
  bottom: clamp(28px, 6vh, 64px);
  z-index: 2;
}

/* Kinetic typography -------------------------------------------------------- */
.show--type {
  background: var(--canvas);
  align-items: center;
  justify-content: center;
}
.kt {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2px, 0.4vw, 8px);
  line-height: 0.92;
  text-align: center;
}
.kt-line {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: -0.04em;
  font-size: clamp(46px, 12.75vw, 196px);   /* ~15% smaller */
  white-space: nowrap;
  will-change: transform;
}
/* Assemble line: per-letter spans fly in (transforms set by showcase.js). */
.kt-assemble { display: flex; }
.kt-assemble .ch {
  display: inline-block;
  will-change: transform, opacity;
}
/* Mask line: a clip-path wipe driven by --p. */
.kt-mask {
  color: var(--accent);
  overflow: hidden;
}
.kt-mask span {
  display: inline-block;
  clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0);
  will-change: clip-path;
}
/* Outline line: hollow stroked word that fills as you scroll. */
.kt-outline {
  -webkit-text-stroke: clamp(1px, 0.18vw, 3px) var(--accent);
  color: transparent;
  opacity: calc(0.25 + var(--p, 0) * 0.75);
  transform: scale(calc(0.92 + var(--p, 0) * 0.08));
  transform-origin: center;
  will-change: transform, opacity;
}

/* Type-as-window — the Fisher logo; shader flows through the FISHER wordmark --- */
.show--window { background: var(--canvas); }
.logo-window {
  position: absolute;
  inset: 0;
  margin: auto;                                   /* center in the section */
  width: min(1500px, 95vw);
  height: calc(min(1500px, 95vw) * 214 / 1385);    /* keep the logo's aspect ratio */
  z-index: 1;
  pointer-events: none;
}
.logo-window .logo-shader,
.logo-window .logo-static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.logo-window .logo-shader {                        /* flowing shader, clipped to FISHER */
  z-index: 0;
  -webkit-mask: url('assets/fisher-mask.png') center / 100% 100% no-repeat;
          mask: url('assets/fisher-mask.png') center / 100% 100% no-repeat;
}
.logo-window .logo-static {                         /* color-swapped FS mark + DIGITAL DESIGN */
  z-index: 1;
  object-fit: fill;
}

/* Custom cursor (built by cursor.js — elements only exist on fine pointers) - */
html.fdl-cursor-on,
html.fdl-cursor-on * { cursor: none !important; }

.fdl-cur {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
}
.fdl-cur--dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(1,169,250,.8);
}
.fdl-cur--ring {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(1,169,250,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  /* size/colour states spring between values; position is JS transform only */
  transition: width .28s cubic-bezier(.3,1.4,.4,1), height .28s cubic-bezier(.3,1.4,.4,1),
              border-color .25s ease, background-color .25s ease;
}
.fdl-cur__label {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 9px;
  letter-spacing: .24em;
  text-indent: .24em;          /* optically recenter the tracked text */
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transition: opacity .2s ease;
  white-space: nowrap;
}
.fdl-cur--wake {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
}
/* over a playable scene: ring grows, label appears */
html.fdl-cur-zone .fdl-cur--ring {
  width: 64px;
  height: 64px;
  border-color: rgba(1,169,250,.9);
  background-color: rgba(1,169,250,.06);
}
html.fdl-cur-zone .fdl-cur__label { opacity: 1; }
/* over a link: ring snaps tight and brightens */
html.fdl-cur-link .fdl-cur--ring {
  width: 28px;
  height: 28px;
  border-color: #bfe7ff;
  background-color: rgba(127,212,255,.08);
}
html.fdl-cur-link .fdl-cur--dot { background: #fff; }
/* pointer left the window (or hasn't arrived yet) */
html.fdl-cur-hide .fdl-cur { visibility: hidden; }
/* click: ring-burst pulse */
.fdl-burst {
  position: fixed;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #7fd4ff;
  pointer-events: none;
  z-index: 9998;
  animation: fdl-burst .5s ease-out forwards;
}
@keyframes fdl-burst {
  from { opacity: .9; transform: translate(-50%,-50%) scale(1); }
  to   { opacity: 0;  transform: translate(-50%,-50%) scale(5.5); }
}

/* Footer / contact ---------------------------------------------------------- */
.footer {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;   /* full screen on every device, like the other sections */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  text-align: center;
  padding: clamp(60px, 12vh, 140px) var(--pad);
  border-top: 1px solid var(--surface-3);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(1,169,250,0.08), transparent 60%),
    var(--canvas);
}
.footer .label { margin-bottom: 4px; }
.footer__mark { font-size: var(--h2); max-width: 18ch; }
.footer__mark .accent { color: var(--accent); }
.footer__contact {
  display: flex;
  gap: 20px;
  align-items: baseline;
  justify-content: center;
  font-family: var(--font-display);     /* match the paragraph body lines */
  font-weight: 400;
  font-size: 19.5px;                    /* 50% larger than the body lines */
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.footer__contact a {
  color: var(--accent);
  text-decoration: none;
  transition: color .2s ease;
}
.footer__contact a:hover { color: var(--text-bright); }
.footer__sep { color: var(--text-muted); }
.footer__note {                          /* match all the paragraph body text */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

/* ===== ALL-CAPS EXPERIMENT ====================================================
   Renders every headline + body line in uppercase WITHOUT changing font-size,
   color, or weight (text-transform only). To revert to mixed case, delete this
   one block. Labels and the kinetic-type words are already uppercase. */
.panel h1, .panel h2, .panel p,
.show__copy h2, .show__copy p,
.footer__mark, .footer__mail, .footer__note {
  text-transform: uppercase;
}
/* ============================================================================ */

/* On phones the hand-placed line breaks in paragraphs fall in the wrong spots
   (the first segment already wraps, so the forced <br> adds an extra line).
   Drop those forced breaks on small screens and let the copy wrap naturally —
   headings keep their breaks. */
/* mobile-only line break: hidden by default (desktop), shown on phones */
.m-br { display: none; }

@media (max-width: 600px) {
  /* strip the desktop-only forced breaks, but keep mobile-only ones */
  .show__copy p br:not(.m-br),
  #hero .panel p br:not(.m-br) { display: none; }
  .m-br { display: inline; }
  /* tighten the wide tracking on phones so lines fit without an extra wrap.
     #hero specificity beats the inline hero-panel rule in index.html. */
  .show__copy p,
  .footer__note { letter-spacing: 0.1em; }
  #hero .panel p { letter-spacing: 0.03em; }   /* tighter so the longest hero line fits one row */
  /* the footer headline wraps to two lines here — the 0.95 heading
     line-height leaves them touching, so open it up */
  .footer__mark { line-height: 1.2; }
}

/* Reduced motion — let the static fallbacks (drawn by showcase.js) stand,
   and calm any CSS-driven kinetic transforms. */
@media (prefers-reduced-motion: reduce) {
  .kt-outline { opacity: 1; transform: none; }
  .kt-mask span { clip-path: none; }
}