/* ---------------------------------------------------------------
   rossikin.com — "Two Worlds"
   A full-viewport diptych. Every visual is generated in site.js;
   this file is layout, type and state only.
   --------------------------------------------------------------- */
:root {
  --ground:  #0E0E10;
  --text:    #EDEAE4;
  --muted:   rgba(237, 234, 228, 0.58);

  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ease:    cubic-bezier(0.22, 0.68, 0.24, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- stage ----------------------------------------------------- */

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  /* fallback wash if the canvas never paints (no JS, canvas unsupported) */
  background:
    linear-gradient(100deg, #1B0E06 0%, #130A05 34%, #0E0E10 52%, #101016 100%);
}

.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* --- panels ---------------------------------------------------- */

.panel {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.5rem, 4.5vw, 4.5rem);

  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  outline: none;

  /* set by site.js — keeps the seam identical in CSS and on the canvas */
  clip-path: var(--clip, none);

  transition: opacity 600ms var(--ease);
}

/* legibility scrim, sits above the canvas and below the copy */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.panel--a::before {
  background: linear-gradient(to top,
    rgba(8, 5, 3, 0.94) 0%, rgba(8, 5, 3, 0.62) 26%, rgba(8, 5, 3, 0) 58%);
}

.panel--b::before {
  background: linear-gradient(to top,
    rgba(5, 5, 8, 0.94) 0%, rgba(5, 5, 8, 0.60) 26%, rgba(5, 5, 8, 0) 58%);
}

.panel--a { align-items: flex-start; text-align: left; }
.panel--b { align-items: flex-end;   text-align: right; }

.panel__meta,
.panel__name,
.panel__line,
.panel__cta { position: relative; z-index: 1; }

/* dim the sibling while one side has the cursor or keyboard focus */
.stage.is-focus-a .panel--b,
.stage.is-focus-b .panel--a { opacity: 0.4; }

/* --- panel copy ------------------------------------------------ */

.panel__meta {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.panel__place { color: var(--accent); }

.panel__time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
}

.panel__name {
  margin: 1.125rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 7.2vw, 6rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.038em;
}

.panel__line {
  margin: 1.375rem 0 0;
  max-width: 30ch;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.15vw, 1.0625rem);
}

.panel__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  padding-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(237, 234, 228, 0.22);
  transition: border-color 400ms var(--ease), color 400ms var(--ease);
}

.panel__arrow { transition: transform 500ms var(--ease); }

.panel:hover .panel__cta,
.panel:focus-visible .panel__cta { border-bottom-color: var(--accent); }

.panel:hover .panel__arrow,
.panel:focus-visible .panel__arrow { transform: translateX(9px); }

/* the panel fills the viewport, so an outline on it would be clipped —
   ring the CTA instead */
.panel:focus-visible .panel__cta {
  outline: 2px solid var(--accent);
  outline-offset: 10px;
}

/* --- wordmark on the seam -------------------------------------- */

.seam {
  position: absolute;
  z-index: 5;
  top: clamp(1.5rem, 4vw, 3rem);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;

  font-family: var(--font-display);
  font-size: clamp(0.75rem, 1vw, 0.9375rem);
  font-weight: 500;
  letter-spacing: 0.44em;
  text-indent: 0.44em;      /* cancel the trailing letter-space */
  text-transform: uppercase;
  white-space: nowrap;

  color: #fff;
  mix-blend-mode: difference;  /* reads across both halves at once */
  pointer-events: none;
}

/* --- intro shutters -------------------------------------------- */

.shutters { display: none; }

.js .shutters {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

.shutter {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  background: var(--ground);
  transition: transform 1000ms var(--ease-io);
  will-change: transform;
}

.shutter--a {
  left: 0;
  box-shadow: 1px 0 0 rgba(255, 79, 0, 0.85), 10px 0 60px rgba(255, 79, 0, 0.30);
}

.shutter--b {
  right: 0;
  box-shadow: -1px 0 0 rgba(237, 234, 228, 0.85), -10px 0 60px rgba(237, 234, 228, 0.16);
}

.is-ready .shutter--a { transform: translateX(-100%); }
.is-ready .shutter--b { transform: translateX(100%); }
.is-done  .shutters   { display: none; }

/* --- entrance stagger ------------------------------------------ */

.js .panel__meta { --d: 560ms; }
.js .panel__name { --d: 660ms; }
.js .panel__line { --d: 760ms; }
.js .panel__cta  { --d: 850ms; }
.js .seam        { --d: 520ms; }

.js .panel__meta,
.js .panel__name,
.js .panel__line,
.js .panel__cta,
.js .seam {
  opacity: 0;
  transform: translateY(16px);
}

.js .seam { transform: translateX(-50%) translateY(16px); }

.js.is-ready .panel__meta,
.js.is-ready .panel__name,
.js.is-ready .panel__line,
.js.is-ready .panel__cta {
  opacity: 1;
  transform: none;
  transition: opacity 800ms var(--ease) var(--d), transform 800ms var(--ease) var(--d);
}

.js.is-ready .seam {
  opacity: 1;
  transform: translateX(-50%);
  transition: opacity 800ms var(--ease) var(--d), transform 800ms var(--ease) var(--d);
}

/* --- exit flood ------------------------------------------------ */

.flood {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--flood, #FF4F00);
  clip-path: circle(0% at var(--fx, 50%) var(--fy, 50%));
  pointer-events: none;
}

.is-leaving .flood {
  clip-path: circle(150% at var(--fx, 50%) var(--fy, 50%));
  transition: clip-path 620ms cubic-bezier(0.7, 0, 0.3, 1);
}

/* --- film grain ------------------------------------------------ */

.grain {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* --- stacked layout -------------------------------------------- */

@media (max-width: 760px) {
  .panel--b { align-items: flex-start; text-align: left; }

  /* top wedge: sit the copy just above the seam */
  .panel--a { padding-bottom: calc(50svh + 1.25rem); }

  .panel--a::before {
    background: linear-gradient(to top,
      rgba(8, 5, 3, 0.90) 0%, rgba(8, 5, 3, 0.50) 34%, rgba(8, 5, 3, 0) 66%);
  }

  .panel__line { max-width: 26ch; font-size: 0.9375rem; }
  .panel__name { font-size: clamp(2.5rem, 12vw, 3.5rem); }
  .seam { top: 1.25rem; }
}

/* --- reduced motion -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .shutter { display: none; }

  /* these must also out-specify the .is-ready entrance rules above,
     or the copy still slides in for someone who asked it not to */
  .js .panel__meta,
  .js .panel__name,
  .js .panel__line,
  .js .panel__cta,
  .js .seam,
  .js.is-ready .panel__meta,
  .js.is-ready .panel__name,
  .js.is-ready .panel__line,
  .js.is-ready .panel__cta,
  .js.is-ready .seam {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .seam,
  .js.is-ready .seam { transform: translateX(-50%); }

  .panel,
  .panel__cta,
  .panel__arrow { transition: none; }

  .panel:hover .panel__arrow,
  .panel:focus-visible .panel__arrow { transform: none; }

  .is-leaving .flood { transition: none; }
}