/* ============================================================
   Island Realm — cast and socials

   Three equal panels, one per cast member, each with its own
   colour. Comic treatment: halftone, hard gutters, chamfered
   corners and titlecard lettering with a solid offset shadow.

   Titlecards are set in Integral CF (Connary Fagen), which is
   commercial and cannot be bundled here. It is first in the
   stack, so a licensed or locally installed copy wins; Archivo
   Black ships as the fallback, being the closest free match for
   its heavy geometric cut.

   To use the real one, drop the licensed files in
   assets/fonts/ and uncomment the @font-face below.
   ============================================================ */

/*
@font-face {
  font-family: 'Integral CF';
  src: url('../assets/fonts/IntegralCF-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
*/

:root {
  --titlecard: 'Integral CF', 'Archivo Black', 'Chakra Petch', system-ui, sans-serif;

  /* the Edgerunners hero yellow, straight off cyberpunk.net */
  --ir-yellow: #FCEE0A;

  --ir-blue:   #2D7DFF;
  --ir-red:    #FF1F3D;
  --ir-amber:  #FFA524;

  --ir-nav-h:  86px;
  --gutter:    4px;
}

body[data-page="islandrealm"] { background: #04050A; }

/* ---------- nav ---------- */

/* Three columns so the button is centred on the viewport rather than
   pushed around by however wide the brand happens to be. */
.ir-nav {
  height: var(--ir-nav-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.ir-nav__pad { display: block; }

.watch {
  --c: 13px;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 15px 30px;
  background: var(--ir-red);
  color: #0A0206;
  text-decoration: none;
  clip-path: var(--cut);
  box-shadow: 0 0 30px rgba(255, 31, 61, 0.4), 0 0 80px rgba(255, 31, 61, 0.18);
  transition: box-shadow 200ms var(--ease-out);
}

.watch__icon { width: 26px; height: 26px; fill: currentColor; flex: 0 0 auto; position: relative; z-index: 1; }

.watch__text {
  position: relative;
  z-index: 1;
  font-family: var(--titlecard);
  font-size: clamp(13px, 1.5vw, 17px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* It glitches on its own every few seconds so it pulls the eye, and
   holds the glitch while hovered. */
.watch__text::before,
.watch__text::after { animation-iteration-count: 1; }

.watch { animation: watchJudder 5.5s steps(2, end) infinite; }
.watch .tearlines { animation: watchBars 5.5s steps(2, end) infinite; }
.watch__text.glitch::before { animation: tearRed 5.5s steps(2, end) infinite; }
.watch__text.glitch::after  { animation: tearDark 5.5s steps(2, end) infinite; }

/* hover drops the long quiet stretch and just runs it */
.watch:hover { box-shadow: 0 0 44px rgba(255, 31, 61, 0.6), 0 0 110px rgba(255, 31, 61, 0.26); }
.watch:hover { animation: watchJudder 260ms steps(2, end) infinite; }
.watch:hover .tearlines { animation: tearBars 300ms steps(2, end) infinite; }
.watch:hover .watch__text.glitch::before { animation: tearRed 420ms steps(2, end) infinite; }
.watch:hover .watch__text.glitch::after  { animation: tearDark 420ms steps(2, end) infinite; }

/* mostly still, with a short burst near the end of each cycle */
@keyframes watchJudder {
  0%, 86%  { transform: translate3d(0, 0, 0); }
  89%      { transform: translate3d(-3px, 1px, 0); }
  92%      { transform: translate3d(3px, -1px, 0); }
  95%      { transform: translate3d(-2px, 0, 0); }
  100%     { transform: translate3d(0, 0, 0); }
}
@keyframes watchBars {
  0%, 85%  { opacity: 0; transform: translate3d(0, 0, 0); }
  88%      { opacity: 0.85; transform: translate3d(-4px, 2px, 0); }
  93%      { opacity: 0.6;  transform: translate3d(3px, -2px, 0); }
  97%      { opacity: 0; }
  100%     { opacity: 0; }
}

/* ---------- the three panels ---------- */

.cast {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  min-height: calc(100svh - var(--ir-nav-h));
  background: #000;
  padding: var(--gutter);
}

.cast__panel {
  --c: 22px;
  /* the name is sized against the panel, not the viewport - at 5.4vw the
     longest of the three ran 228px past its own column */
  container-type: inline-size;
  position: relative;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(24px, 3vw, 46px) clamp(18px, 2.4vw, 38px);
  background: #07080E;
  clip-path: var(--cut);
}

.cast__panel--cuski  { --ink: var(--ir-blue); }
.cast__panel--exiled { --ink: var(--ir-red); }
.cast__panel--epic   { --ink: var(--ir-amber); }

/* colour bleeding down from the top of each panel */
.cast__wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 34%, transparent) 0%, transparent 52%),
    radial-gradient(120% 52% at 50% 0%, color-mix(in srgb, var(--ink) 44%, transparent) 0%, transparent 70%);
}

/* comic halftone, densest at the top where the colour is */
.cast__halftone {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(var(--ink) 1.1px, transparent 1.2px);
  background-size: 7px 7px;
  opacity: 0.26;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 42%, transparent 78%);
}

.cast__top { position: relative; z-index: 2; }

.cast__role {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
}

/* titlecard lettering: heavy, tight, with a solid offset shadow the way
   comic nameplates are set */
.cast__name {
  margin: 0;
  font-family: var(--titlecard);
  font-size: clamp(2.4rem, 20cqw, 7.5rem);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--ir-yellow);
  /* a long name stacks on the <wbr> rather than running out of its panel */
  overflow-wrap: break-word;
}

/* ---------- socials (filled in later) ---------- */

.cast__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(20px, 2.6vw, 34px);
}

.cast__social {
  --c: 9px;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.42);
  box-shadow: inset 0 0 0 2px currentColor;
  clip-path: var(--cut);
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out),
              transform 180ms var(--ease-out);
}
.cast__social svg { width: 23px; height: 23px; fill: currentColor; }

.cast__social:hover {
  background: var(--ink);
  color: #06070C;
  transform: translateY(-3px);
}
.cast__social:focus-visible { outline: 2px solid var(--ir-yellow); outline-offset: 3px; }

@media (max-width: 620px) {
  .cast__social { width: 44px; height: 44px; }
  .cast__social svg { width: 20px; height: 20px; }
}

/* ---------- art (dropped in later) ---------- */

.cast__art {
  position: relative;
  z-index: 2;
  margin-top: clamp(30px, 5vh, 70px);
  min-height: clamp(160px, 34vh, 340px);
  display: grid;
  place-items: center;
  border: 2px dashed rgba(255, 255, 255, 0.12);
}
.cast__art span {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-40);
}

/* ---------- stacked on small screens ---------- */

@media (max-width: 900px) {
  .cast { grid-template-columns: 1fr; min-height: 0; }
  .cast__panel { min-height: 70svh; }
  .cast__art { min-height: clamp(140px, 26vh, 240px); }
}

@media (max-width: 620px) {
  .ir-nav { height: 72px; }
  .watch { padding: 11px 15px; gap: 9px; }
  .watch__icon { width: 20px; height: 20px; }
  .watch__text { font-size: 11px; letter-spacing: 0.07em; }
  .cast__name { font-size: clamp(2.6rem, 22cqw, 5.5rem); }
}