/* ==========================================================================
   IRA AEROSPACE — BASE: reset, typography, page frame, masthead
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--platinum);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* The section motif. Pattern and colour both come from the active theme. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: var(--motif);
  background-size: var(--motif-size);
  mask-image: radial-gradient(ellipse 130% 100% at 50% 0%, #000 0%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 130% 100% at 50% 0%, #000 0%, transparent 82%);
  transition: opacity var(--dur-3) var(--ease);
}

img, canvas { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--void); }

/* --------------------------------------------------------------------------
   Utility type roles
   -------------------------------------------------------------------------- */

.label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--platinum-3);
}
.label--accent { color: var(--accent); }
.label--alt    { color: var(--accent-2); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.prose {
  max-width: 62ch;
  color: var(--platinum-2);
  font-size: var(--t-body);
  line-height: 1.7;
}
.prose em { color: var(--accent); font-style: normal; }
.prose strong { color: var(--platinum); font-weight: 500; }

/* --------------------------------------------------------------------------
   Page frame
   -------------------------------------------------------------------------- */

.shell {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem);
  border-top: 1px solid var(--rule-faint);
}
.section:first-child { border-top: 0; }

.section__head {
  display: grid;
  gap: var(--s-4);
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

.section__eyebrow { display: flex; align-items: center; gap: var(--s-3); }
.section__eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--rule), transparent);
}

.section__title { font-size: clamp(2rem, 4.8vw, 4rem); font-stretch: 112%; max-width: 18ch; letter-spacing: -0.03em; }

/* --------------------------------------------------------------------------
   Masthead — the mark, the four doors, the vault key
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  transition: transform var(--dur-3) var(--ease-out-expo), opacity var(--dur-2) var(--ease);
}
.masthead.is-hidden { transform: translateY(-110%); opacity: 0; pointer-events: none; }
.masthead {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule-faint);
  background: rgba(var(--ground-rgb), 0.88);
  backdrop-filter: blur(14px) saturate(1.2);
}

/* The lockup. The mark and the word are set to the same optical weight so
   IRA reads as a monogram beside its own figure, not a caption under it. */
.mark {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
  padding: 2px 0;
}

.mark canvas {
  width: 44px; height: 44px;
  flex: none;
  transition: transform var(--dur-3) var(--ease-out-expo);
}

.mark__word { display: flex; flex-direction: column; line-height: 1; }

.mark__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 122%;
  letter-spacing: 0.1em;
  font-size: 1.62rem;
  line-height: 0.88;
  color: var(--platinum);
}
.mark__sub {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--platinum-3);
  margin-top: 6px;
}

.masthead__tools { display: flex; align-items: center; flex: none; }

.masthead__nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.masthead__nav::-webkit-scrollbar { display: none; }

.navlink {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 0;
  background: none;
  color: var(--platinum-2);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease);
}
.navlink__i { color: var(--platinum-3); font-size: 0.66rem; }
.navlink__t { display: inline; }
.navlink::after {
  content: "";
  position: absolute;
  left: var(--s-4); right: var(--s-4); bottom: 6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-sharp);
}
.navlink:hover { color: var(--platinum); }
.navlink:hover::after { transform: scaleX(1); }
.navlink[aria-current="page"] { color: var(--accent); }
.navlink[aria-current="page"] .navlink__i { color: var(--accent); }
.navlink[aria-current="page"]::after { transform: scaleX(1); }

@media (max-width: 1180px) {
  .navlink { font-size: 0.74rem; padding-inline: var(--s-3); }
}
@media (max-width: 960px) {
  .mark__sub { display: none; }
  .mark__name { font-size: 1.4rem; }
  .mark canvas { width: 38px; height: 38px; }
  .navlink { padding-inline: var(--s-3); }
}
@media (max-width: 760px) {
  .masthead { gap: var(--s-3); }
  .navlink .navlink__t { display: none; }
  .navlink { padding-inline: 0.6rem; }
  .themeswitch__label { display: none; }
}

/* --------------------------------------------------------------------------
   View transitions — content is readable at rest; only a short settle
   -------------------------------------------------------------------------- */

#view { display: block; }

.view-enter { animation: viewIn var(--dur-3) var(--ease) both; }

@keyframes viewIn {
  from { opacity: 0.25; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: transform 900ms var(--ease-out-expo), opacity 600ms var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* A hairline that draws itself from its start when it arrives. */
.rule-draw { transform-origin: left top; transform: scaleX(0); transition: transform 1100ms var(--ease-out-expo) 120ms; }
.rule-draw.is-in { transform: none; }
.view__coord-rule.rule-draw { transform: scaleY(0); }
.view__coord-rule.rule-draw.is-in { transform: none; }

/* The highlight: the one phrase on the line the eye should land on. It is
   a real <mark> — screen readers announce it — drawn as an accent band that
   sweeps in from the left when the paragraph scrolls into view. */
mark.hl {
  color: var(--platinum);
  background: linear-gradient(to top, rgba(var(--accent-rgb), var(--hl-a, 0.28)) 0 34%, transparent 34%) no-repeat 0 0 / 0% 100%;
  padding: 0 0.08em;
  margin: 0 -0.08em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-size 900ms var(--ease-out-expo) 140ms;
}
mark.hl.is-in { background-size: 100% 100%; }
.hero__standfirst mark.hl, .prose mark.hl { font-weight: 500; }

/* Reduced motion is decided by js/core/runtime.js from the site's motion
   policy (config.motion) and the OS preference, and stamped as a class —
   so one setting governs CSS and canvas alike. */
html.reduce-motion {
  scroll-behavior: auto;
}
html.reduce-motion .reveal { opacity: 1; transform: none; transition: none; }
html.reduce-motion .rule-draw, html.reduce-motion .view__coord-rule.rule-draw { transform: none; transition: none; }
html.reduce-motion mark.hl { background-size: 100% 100%; transition: none; }
html.reduce-motion .view-enter { animation: none; }
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}


/* --------------------------------------------------------------------------
   Appearance control — one button that cycles system → light → dark
   -------------------------------------------------------------------------- */

.themeswitch {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.5rem 0.7rem;
  margin-left: var(--s-3);
  border: 1px solid var(--rule-neutral);
  background: transparent;
  color: var(--platinum-3);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.themeswitch:hover { color: var(--platinum); border-color: var(--rule); }
.themeswitch__glyph { font-size: 0.85rem; line-height: 1; color: var(--accent); }

/* --------------------------------------------------------------------------
   Scroll progress rail
   -------------------------------------------------------------------------- */

.scrollrail {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
  background: rgba(var(--accent-rgb), 0.10);
}
.scrollrail i {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

/* --------------------------------------------------------------------------
   Loading sequence
   -------------------------------------------------------------------------- */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  background: var(--void);
  transition: opacity 480ms var(--ease), visibility 480ms var(--ease);
}
.preloader.is-out { opacity: 0; visibility: hidden; }

.preloader__mark { width: 132px; height: 132px; }

.preloader__word {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 122%;
  font-size: 1.6rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--platinum);
  animation: preWord 700ms var(--ease) both 380ms;
}
.preloader__sub {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--platinum-4);
  animation: preWord 700ms var(--ease) both 520ms;
}
.preloader__bar {
  display: block;
  width: 132px;
  height: 1px;
  margin-top: var(--s-4);
  background: var(--rule-neutral);
}
.preloader__bar i {
  display: block;
  height: 100%;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
}

@keyframes preWord {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Nothing behind the loader should scroll while it is up. */
html.is-loading, html.is-loading body { overflow: hidden; }

/* --------------------------------------------------------------------------
   Split-word headings
   The words are real text in document order; only the presentation moves.
   -------------------------------------------------------------------------- */

.sw { display: inline-block; overflow: hidden; vertical-align: bottom; }
.sw__i {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  transition: transform 760ms var(--ease-out-expo), opacity 500ms var(--ease);
}
[data-split].is-in .sw__i { transform: none; opacity: 1; }

html.reduce-motion .sw__i { transform: none; opacity: 1; transition: none; }
html.reduce-motion .preloader__word, html.reduce-motion .preloader__sub { animation: none; }


/* --------------------------------------------------------------------------
   Curtain — the cut between sections
   -------------------------------------------------------------------------- */

.curtain {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  background: rgb(var(--curtain-rgb, var(--teal-rgb)));
  transform: translateY(100%);
  will-change: transform;
}
.curtain.is-in { display: block; }
.curtain.is-cover { transform: translateY(0); transition: transform 380ms var(--ease-out-expo); }
.curtain.is-out { transform: translateY(-100%); transition: transform 460ms cubic-bezier(0.7, 0, 0.2, 1); }

.curtain__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  color: rgb(var(--ground-rgb));
}
.curtain__inner canvas { width: 96px; height: 96px; }
.curtain__coord {
  font-family: var(--font-display);
  font-size: clamp(3rem, 10vw, 7rem);
  font-weight: 800;
  font-stretch: 122%;
  letter-spacing: -0.05em;
  line-height: 0.85;
}
.curtain__name {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Cursor — fine pointers only; the class is set by js/core/cursor.js
   -------------------------------------------------------------------------- */

html.has-cursor, html.has-cursor body,
html.has-cursor a, html.has-cursor button, html.has-cursor [role="button"] { cursor: none; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto; }

.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
  will-change: transform;
}
.cursor.is-on { opacity: 1; }
.cursor.is-hidden { opacity: 0; }

.cursor__dot {
  position: absolute;
  left: -3px; top: -3px;
  width: 6px; height: 6px;
  background: var(--accent);
  transition: transform var(--dur-1) var(--ease);
}
.cursor.is-down .cursor__dot { transform: scale(0.6); }

.cursor__ring {
  position: absolute;
  left: -18px; top: -18px;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  border-radius: 50%;
  transition: transform 300ms var(--ease-out-expo), border-color var(--dur-1) var(--ease), background var(--dur-2) var(--ease);
}
/* crosshair ticks on the ring */
.cursor__ring::before, .cursor__ring::after {
  content: "";
  position: absolute;
  background: rgba(var(--accent-rgb), 0.55);
  transition: opacity var(--dur-1) var(--ease);
}
.cursor__ring::before { width: 1px; height: 8px; top: -4px; left: 50%; box-shadow: 0 32px 0 rgba(var(--accent-rgb), 0.55); }
.cursor__ring::after  { height: 1px; width: 8px; left: -4px; top: 50%; box-shadow: 32px 0 0 rgba(var(--accent-rgb), 0.55); }

.cursor.is-link .cursor__ring { transform: scale(1.35); border-color: var(--accent); background: rgba(var(--accent-rgb), 0.06); }

.cursor__label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(var(--ground-rgb));
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out-expo);
  white-space: nowrap;
}
.cursor.is-active .cursor__ring {
  transform: scale(1.9);
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.9);
}
.cursor.is-active .cursor__ring::before,
.cursor.is-active .cursor__ring::after { opacity: 0; }
.cursor.is-active .cursor__label { opacity: 1; transform: scale(0.5); color: var(--accent); }
.cursor.is-active .cursor__dot { opacity: 0; }
.cursor.is-active.is-down .cursor__ring { transform: scale(1.6); }

/* --------------------------------------------------------------------------
   Magnetic hover — the element leans toward the pointer
   -------------------------------------------------------------------------- */

.is-magnet {
  transition: transform 520ms var(--ease-out-expo);
  transform-style: preserve-3d;
  will-change: transform;
}
.is-magnet.reveal { transition: transform 900ms var(--ease-out-expo), opacity 600ms var(--ease); }
.is-magnet.reveal.is-in { transition: transform 520ms var(--ease-out-expo), opacity 600ms var(--ease); }