/* Pauram — polish layer on top of the prebuilt Next.js export.
   Loaded after the main stylesheet on every page. */

/* Large decorative glow shapes extend past the viewport and widen the page on
   phones (594px on a 375px screen), pushing the header menu/cart buttons
   off-screen. Clip them inside each content block. Not on html/body: that
   turns <body> into its own scroll container, which on iOS Safari misplaces
   taps on the fixed header and its menu after scrolling. */
main > section,
main > div:not(.fixed),
footer {
  overflow-x: clip;
}

/* Crisper type rendering on the dark background. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Section links land below the fixed header instead of underneath it. */
html {
  scroll-padding-top: 88px;
}

/* Brand-coloured text selection. */
::selection {
  background: rgb(255 224 130 / 0.25);
  color: #fff;
}

/* Visible keyboard focus in the brand spark colour. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid rgb(255 224 130 / 0.85);
  outline-offset: 3px;
  border-radius: 999px;
}

/* Header between 1280px and 1535px: the full nav plus Sound/Cart/Pioneer
   buttons is ~90px wider than the screen, so "Pioneer Access" gets cut off
   and "Apps & Licensing" wraps to two lines. Tighten the nav and make the
   Sound and Cart buttons icon-only at these widths. */
@media (min-width: 1280px) and (max-width: 1535px) {
  header nav {
    letter-spacing: 0.08em; /* spacing between links is set with the dividers further down */
  }
  header nav > * {
    white-space: nowrap;
  }
  header .shrink-0.hidden > button > span:not([class*="absolute"]) {
    display: none;
  }
  header .shrink-0.hidden > button {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
  header .shrink-0.hidden > a {
    padding-left: 1rem;
    padding-right: 1rem;
    letter-spacing: 0.14em;
  }
}

/* Hero "Prologue Film" button now opens the film: give it a gentle pulse
   so it reads as the primary watch action. */
@keyframes pauram-film-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(255 224 130 / 0); }
  50% { box-shadow: 0 0 22px 0 rgb(255 224 130 / 0.22); }
}
#prologue button.text-pauram-spark {
  animation: pauram-film-pulse 3.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  #prologue button.text-pauram-spark {
    animation: none;
  }
  html {
    scroll-behavior: auto !important;
  }
}

/* Current release badge under the hero buttons.
   Drawn with a pseudo-element so the React-rendered hero markup is untouched.
   To announce a new release, change the version in `content` below. */
#prologue .max-w-4xl.flex-col::after {
  content: "Now shipping \2014  PauramIntelligence 9.4.0 Release";
  display: inline-block;
  margin-top: 22px;
  padding: 6px 14px 6px 28px;
  border-radius: 999px;
  border: 1px solid rgb(52 211 153 / 0.22);
  background:
    radial-gradient(circle at 14px 50%, rgb(52 211 153) 0 3px, rgb(52 211 153 / 0.25) 3.5px 6px, transparent 6.5px),
    rgb(52 211 153 / 0.05);
  color: rgb(167 243 208 / 0.85);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 400px) {
  #prologue .max-w-4xl.flex-col::after {
    letter-spacing: 0.12em;
    font-size: 9px;
  }
}

/* ------------------------------------------------------------------
   Hardware node 3D card (#hardware-node, "Drag to rotate hardware").
   The original build draws a front face plus one side strip that sits
   16px off the edge, so the device reads as a loose slab. Rebuild it as
   a solid 22px-deep device: front, back and four edges. Then add an
   idle float/sway, a holographic sweep, ring pulses, and an accent
   colour that follows the selected tab.
   ------------------------------------------------------------------ */
#hardware-node {
  --hw: 255 224 130; /* Biometric: spark gold */
  --hw-depth: 22px;
  --hw-half: 11px;
  --hw-radius: 20px;
}
#hardware-node:has(.pointer-events-auto > button:nth-child(2).bg-white) { --hw: 56 189 248; }  /* Faraday: cyan */
#hardware-node:has(.pointer-events-auto > button:nth-child(3).bg-white) { --hw: 226 232 240; } /* Mechanical: silver */
#hardware-node:has(.pointer-events-auto > button:nth-child(4).bg-white) { --hw: 168 85 247; }  /* Vapor-chamber: violet */

/* The rotating device (React writes its drag rotation as an inline transform). */
#hardware-node [style*="preserve-3d"] {
  animation:
    hw-sway 14s ease-in-out infinite,
    hw-float 6s ease-in-out infinite;
}
/* Hand control back to the visitor: on mouse hover, and permanently once they
   touch or click the card (.hw-touched is set by pauram-film.js). Touch
   screens don't reliably fire :hover during a drag, so the class is required. */
#hardware-node .cursor-grab:hover [style*="preserve-3d"],
#hardware-node .cursor-grab:active [style*="preserve-3d"],
#hardware-node.hw-touched [style*="preserve-3d"] {
  animation: hw-float 6s ease-in-out infinite;
}
/* Vertical swipes over the card scroll the page; horizontal drags rotate it.
   (The original `touch-none` trapped page scrolling on phones.) */
#hardware-node .cursor-grab {
  touch-action: pan-y;
}
@keyframes hw-sway {
  0%, 100% { transform: perspective(1200px) rotateX(12deg) rotateY(-20deg); }
  25%      { transform: perspective(1200px) rotateX(7deg)  rotateY(-42deg); }
  50%      { transform: perspective(1200px) rotateX(14deg) rotateY(-20deg); }
  75%      { transform: perspective(1200px) rotateX(8deg)  rotateY(4deg); }
}
@keyframes hw-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}

/* Front face, pushed forward by half the depth. */
#hardware-node [style*="preserve-3d"] > div:first-child {
  border-radius: var(--hw-radius);
  transform: translateZ(var(--hw-half));
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-color: rgb(var(--hw) / 0.28);
  transition: border-color 0.6s ease;
}

/* Top and bottom edges, hinged off the front face. */
#hardware-node [style*="preserve-3d"] > div:first-child::before,
#hardware-node [style*="preserve-3d"] > div:first-child::after {
  content: "";
  position: absolute;
  left: calc(var(--hw-radius) - 1px);
  right: calc(var(--hw-radius) - 1px);
  height: var(--hw-depth);
  background: linear-gradient(180deg, #0b0b12 0 42%, rgb(var(--hw) / 0.55) 50%, #0b0b12 58% 100%);
  pointer-events: none;
  transition: background 0.6s ease;
}
#hardware-node [style*="preserve-3d"] > div:first-child::before {
  top: -1px;
  transform-origin: top center;
  transform: rotateX(-90deg);
}
#hardware-node [style*="preserve-3d"] > div:first-child::after {
  bottom: -1px;
  transform-origin: bottom center;
  transform: rotateX(90deg);
}

/* Left edge: the original side strip, re-seated flush with the faces. */
#hardware-node [style*="preserve-3d"] > div:nth-child(2) {
  top: var(--hw-radius) !important;
  bottom: var(--hw-radius) !important;
  width: var(--hw-depth) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, #0b0b12 0 42%, rgb(var(--hw) / 0.55) 50%, #0b0b12 58% 100%) !important;
  transform-origin: center !important;
  transform: translateX(calc(var(--hw-half) * -1)) rotateY(-90deg) !important;
}

/* Back face and right edge. */
#hardware-node [style*="preserve-3d"]::before,
#hardware-node [style*="preserve-3d"]::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
#hardware-node [style*="preserve-3d"]::before {
  inset: 0;
  border-radius: var(--hw-radius);
  border: 1px solid rgb(255 255 255 / 0.12);
  background:
    url("/media/pauram-emblem-engraved.svg?v=2") center / 64px auto no-repeat,
    linear-gradient(135deg, #181824 0%, #0b0b12 55%, #14141e 100%);
  transform: translateZ(calc(var(--hw-half) * -1)) rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#hardware-node [style*="preserve-3d"]::after {
  top: var(--hw-radius);
  bottom: var(--hw-radius);
  right: 0;
  width: var(--hw-depth);
  background: linear-gradient(90deg, #0b0b12 0 42%, rgb(var(--hw) / 0.55) 50%, #0b0b12 58% 100%);
  transform: translateX(var(--hw-half)) rotateY(90deg);
  transition: background 0.6s ease;
}

/* Holographic light sweep across the front glass. */
#hardware-node [style*="preserve-3d"] > div:first-child > .my-auto::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--hw-radius);
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 38%,
    rgb(255 255 255 / 0.07) 47%,
    rgb(var(--hw) / 0.08) 52%,
    transparent 62%);
  background-size: 260% 100%;
  animation: hw-sheen 7s ease-in-out infinite;
}
@keyframes hw-sheen {
  0%   { background-position: 130% 0; }
  55%, 100% { background-position: -30% 0; }
}

/* Cryptographic ring: accent glow plus outward pulses. */
#hardware-node [style*="preserve-3d"] .rounded-full.border-pauram-spark\/50 {
  position: relative;
  border-color: rgb(var(--hw) / 0.6);
  box-shadow: 0 0 28px -4px rgb(var(--hw) / 0.45), inset 0 0 18px -6px rgb(var(--hw) / 0.35);
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
}
#hardware-node [style*="preserve-3d"] .rounded-full.border-pauram-spark\/50::before,
#hardware-node [style*="preserve-3d"] .rounded-full.border-pauram-spark\/50::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  border: 1px solid rgb(var(--hw) / 0.55);
  pointer-events: none;
  animation: hw-pulse 3.6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
#hardware-node [style*="preserve-3d"] .rounded-full.border-pauram-spark\/50::after {
  animation-delay: 1.8s;
}
@keyframes hw-pulse {
  0%   { transform: scale(1);    opacity: 0.8; }
  100% { transform: scale(1.85); opacity: 0; }
}

/* Light pool under the device, breathing with the float. */
#hardware-node .cursor-grab > div:first-child::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(50% + 172px);
  width: 230px;
  height: 34px;
  margin-left: -115px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgb(var(--hw) / 0.22), transparent 70%);
  filter: blur(6px);
  animation: hw-pool 6s ease-in-out infinite;
  transition: background 0.6s ease;
}
@media (max-width: 639px) {
  #hardware-node .cursor-grab > div:first-child::after {
    top: calc(50% + 152px);
    width: 200px;
    margin-left: -100px;
  }
}
@keyframes hw-pool {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(0.82); opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  #hardware-node [style*="preserve-3d"],
  #hardware-node [style*="preserve-3d"] > div:first-child > .my-auto::before,
  #hardware-node [style*="preserve-3d"] .rounded-full.border-pauram-spark\/50::before,
  #hardware-node [style*="preserve-3d"] .rounded-full.border-pauram-spark\/50::after,
  #hardware-node .cursor-grab > div:first-child::after {
    animation: none;
  }
}

/* ------------------------------------------------------------------
   Circuit identity (2026 logo refresh). The new mark is a P drawn as
   circuit traces around a chip; these details carry that language
   through the page without touching the React markup.
   ------------------------------------------------------------------ */

/* Chip-and-trace node centred on each section's top border and the
   footer's. Hangs below the line so overflow-hidden sections keep it. */
main > section[class*="border-t"]::before,
footer[class*="border-t"]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  z-index: 1;
  width: min(420px, 100%);
  height: 24px;
  transform: translateX(-50%);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='24' viewBox='0 0 420 24'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.3'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M40 1.2H170L180 11.2H197' stroke='url(%23a)'/%3E%3Cpath d='M380 1.2H250L240 11.2H223' stroke='url(%23b)'/%3E%3Cpath d='M216 17.5V19.5H232' stroke='%23fff' stroke-opacity='.22'/%3E%3C/g%3E%3Ccircle cx='235.5' cy='19.5' r='2.6' fill='none' stroke='%23fff' stroke-opacity='.3' stroke-width='1.1'/%3E%3Crect x='197' y='5' width='26' height='12.5' rx='1.6' fill='%23ffe082' fill-opacity='.12' stroke='%23ffe082' stroke-opacity='.6' stroke-width='1.1'/%3E%3Crect x='206.5' y='9' width='7' height='4.5' rx='.6' fill='%23ffe082' fill-opacity='.55'/%3E%3C/svg%3E") center top / 420px 24px no-repeat;
}

/* A faint signal travelling along the trace: header underline and each
   section divider, like current moving through the board. */
main > section[class*="border-t"]::after,
footer[class*="border-t"]::after,
header.fixed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(255 224 130 / 0), rgb(255 224 130 / 0.6) 50%, rgb(255 224 130 / 0)) no-repeat;
  background-size: 34% 100%;
  animation: pauram-signal 11s linear infinite;
}
header.fixed::after {
  top: auto;
  bottom: -1px;
  animation-duration: 14s;
  animation-delay: -4s;
  opacity: 0.7;
}
main > section[class*="border-t"]:nth-of-type(even)::after {
  animation-delay: -5.5s;
}
@keyframes pauram-signal {
  0%        { background-position: -60% 0; }
  45%, 100% { background-position: 160% 0; }
}

/* Circuit-board texture behind the hero, faded out under the headline. */
#prologue > section {
  isolation: isolate;
}
#prologue > section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.06;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 40H60L80 60H136'/%3E%3Ccircle cx='140' cy='60' r='4'/%3E%3Cpath d='M240 40H212L192 20V0'/%3E%3Cpath d='M192 240V226'/%3E%3Cpath d='M0 150H38L58 170V240'/%3E%3Cpath d='M58 0V18'/%3E%3Ccircle cx='58' cy='22' r='4'/%3E%3Cpath d='M240 150H214L198 134V104'/%3E%3Ccircle cx='198' cy='100' r='4'/%3E%3Cpath d='M100 240V204L118 186H160'/%3E%3Ccircle cx='164' cy='186' r='4'/%3E%3Cpath d='M100 0V12'/%3E%3Ccircle cx='100' cy='16' r='4'/%3E%3Cpath d='M20 100H88L106 118V138'/%3E%3Ccircle cx='16' cy='100' r='4'/%3E%3Ccircle cx='106' cy='142' r='4'/%3E%3Cpath d='M146 100H164L176 88V72'/%3E%3Ccircle cx='176' cy='68' r='4'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Crect x='183' y='208' width='18' height='18' rx='2'/%3E%3Crect x='130' y='92' width='16' height='16' rx='2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 240px repeat;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 38%, transparent 30%, #000 85%);
          mask-image: radial-gradient(ellipse 75% 60% at 50% 38%, transparent 30%, #000 85%);
}

@media (prefers-reduced-motion: reduce) {
  main > section[class*="border-t"]::after,
  footer[class*="border-t"]::after,
  header.fixed::after {
    animation: none;
    opacity: 0;
  }
}

/* Header: the desktop buttons (Sound, Cart, Pioneer Access) turned on at 640px while the phone buttons
   (cart, sound, menu) stayed until 1280px, so tablets and small laptops showed both sets. Desktop set now
   starts where the phone set ends. */
@media (max-width: 1279.98px) {
  header .shrink-0.hidden.sm\:flex { display: none !important; }
}

/* Phone menu: the panel stopped at 85% of the screen, so a strip of the page showed under it and cut off the
   last button. While the menu is open, the header's dark background reaches the bottom and the list gets the room. */
header:has(.animate-fade-in.max-h-\[85vh\]) {
  bottom: 0;
  background-color: #030305;
}
header .animate-fade-in.max-h-\[85vh\] {
  max-height: calc(100dvh - 72px);
}

/* Menu: a thin divider between every link ("Home | Manifesto | Playground | …"). The gap sits on both sides of
   each line, so the spacing stays even. */
header .hidden.xl\:flex { column-gap: 0.55rem; }
header .hidden.xl\:flex > * + * {
  padding-left: 0.55rem;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  line-height: 1;
}
/* The full menu needs about 1440px. Between 1280 and 1439px use the ☰ menu (as on tablets) instead of letting
   the buttons run off the right edge; 1536px+ widens the header row and spaces the links out. */
@media (min-width: 1280px) and (max-width: 1439.98px) {
  header .hidden.xl\:flex,
  header .shrink-0.hidden.sm\:flex { display: none !important; }
  header .flex.xl\:hidden { display: flex !important; }
  header .xl\:hidden.animate-fade-in { display: flex !important; }
}
@media (min-width: 1440px) and (max-width: 1535.98px) {
  header .hidden.xl\:flex { column-gap: 0.45rem; }
  header .hidden.xl\:flex > * + * { padding-left: 0.45rem; }
}
@media (min-width: 1536px) {
  header .max-w-\[1400px\] { max-width: 1560px; }
  header .hidden.xl\:flex { column-gap: 0.7rem; }
  header .hidden.xl\:flex > * + * { padding-left: 0.7rem; }
}
@media (min-width: 1800px) {
  header .max-w-\[1400px\] { max-width: 1700px; }
  header .hidden.xl\:flex { column-gap: 0.85rem; }
  header .hidden.xl\:flex > * + * { padding-left: 0.85rem; }
}
/* On desktop the Sound and Cart buttons show just their icons (as on phones) to leave room for the dividers */
@media (min-width: 1440px) {
  header .shrink-0.hidden.sm\:flex > button > span { display: none; }
  header .shrink-0.hidden.sm\:flex > button { padding-left: 0.6rem; padding-right: 0.6rem; }
}
/* ☰ menu: every link already sits on a line; make those lines visible */
header .animate-fade-in > a.border-b { border-bottom-color: rgba(255, 255, 255, 0.12); }
header .animate-fade-in > button:first-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }