/* Aethonex premium layer v1
   Progressive enhancement only. Every rule is behind @supports or a class, so the site is complete without it.
   Colours: BRAND.md tokens only. Transparency only as rgba() of a palette colour.
   No cookies, no storage, no external origins. */

:root{
  --pl-ease: cubic-bezier(.2,.7,.2,1);
  --pl-fast: 180ms;
  --pl-base: 240ms;
  --pl-slow: 640ms;
  --pl-primary-rgb: 227,195,132;   /* #e3c384 */
  --pl-glow-rgb: 255,223,159;      /* #ffdf9f */
  --pl-stage-rgb: 14,14,14;        /* #0e0e0e */
}

/* 1. Cross-page transitions (Chrome 134+, Safari 18.2+). Ignored elsewhere. */
@view-transition{ navigation:auto; }
::view-transition-old(root),::view-transition-new(root){ animation-duration:var(--pl-base); animation-timing-function:var(--pl-ease); }
.site-header{ view-transition-name:site-header; }
.brand-mark{ view-transition-name:brand-mark; }
::view-transition-group(site-header),::view-transition-group(brand-mark){ animation-duration:var(--pl-base); }

/* 2. Scroll-driven reveal. Visible by default; animates only where supported. */
@keyframes pl-rise{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
@keyframes pl-draw{ to{ stroke-dashoffset:0; } }
@keyframes pl-fade{ from{ opacity:0; } to{ opacity:1; } }

@supports (animation-timeline: view()){
  .reveal{ animation:pl-rise linear both; animation-timeline:view(); animation-range:entry 0% entry 55%; }
  .reveal-fade{ animation:pl-fade linear both; animation-timeline:view(); animation-range:entry 0% entry 70%; }
  .draw path,.draw line,.draw polyline{ stroke-dasharray:1; stroke-dashoffset:1; animation:pl-draw linear both; animation-timeline:view(); animation-range:entry 5% cover 38%; }
  .parallax-slow{ animation:pl-par linear both; animation-timeline:view(); animation-range:cover 0% cover 100%; }
  @keyframes pl-par{ from{ translate:0 24px; } to{ translate:0 -24px; } }
}
/* Fallback for browsers without scroll timelines: premium.js adds .pl-in once, only if JS runs. */
@supports not (animation-timeline: view()){
  .js .reveal,.js .reveal-fade{ opacity:0; transform:translateY(16px); transition:opacity var(--pl-slow) var(--pl-ease), transform var(--pl-slow) var(--pl-ease); }
  .js .reveal.pl-in,.js .reveal-fade.pl-in{ opacity:1; transform:none; }
  .js .draw path,.js .draw line,.js .draw polyline{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.2s var(--pl-ease); }
  .js .draw.pl-in path,.js .draw.pl-in line,.js .draw.pl-in polyline{ stroke-dashoffset:0; }
}

/* 3. Load-in stagger with sibling-index() (Chrome 138+, Safari 26.2+, Firefox 154+) */
@supports (width: calc(sibling-index() * 1px)){
  .stagger > *{ animation:pl-rise var(--pl-slow) var(--pl-ease) both; animation-delay:calc((sibling-index() - 1) * 70ms); }
}

/* 4. Dialogs and popovers that animate in and out */
dialog.pl-dialog, [popover].pl-pop{
  opacity:0; transform:translateY(10px) scale(.985);
  transition:opacity var(--pl-base) var(--pl-ease), transform var(--pl-base) var(--pl-ease), overlay var(--pl-base) allow-discrete, display var(--pl-base) allow-discrete;
}
dialog.pl-dialog[open], [popover].pl-pop:popover-open{ opacity:1; transform:none; }
@starting-style{
  dialog.pl-dialog[open], [popover].pl-pop:popover-open{ opacity:0; transform:translateY(10px) scale(.985); }
}
dialog.pl-dialog::backdrop{ background:rgba(var(--pl-stage-rgb),.72); transition:opacity var(--pl-base) var(--pl-ease), display var(--pl-base) allow-discrete, overlay var(--pl-base) allow-discrete; opacity:0; }
dialog.pl-dialog[open]::backdrop{ opacity:1; }
@starting-style{ dialog.pl-dialog[open]::backdrop{ opacity:0; } }

/* 5. Anchored tooltips (anchor positioning). Set --anchor on the trigger, same name on the tip. */
@supports (anchor-name: --a){
  .pl-tipbtn{ anchor-name:var(--anchor); }
  .pl-tip{ position:fixed; position-anchor:var(--anchor); inset:auto; top:anchor(bottom); left:anchor(center); translate:-50% 10px; margin:0; position-try-fallbacks:flip-block; }
}

/* 6. Squircle corners (Chromium 139+). Radii stay on the brand scale: 10 control, 16 card, 28 stage. */
@supports (corner-shape: squircle){
  .btn,.card,.stage,.chip,input,select,textarea{ corner-shape:squircle; }
}

/* 7. Spotlight border that follows the pointer. premium.js sets --mx and --my. */
.spot{ position:relative; isolation:isolate; }
.spot::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(var(--pl-primary-rgb),.10), transparent 60%);
  transition:opacity var(--pl-base) var(--pl-ease);
}
.spot:hover::before{ opacity:1; }
@media (hover:none){ .spot::before{ display:none; } }

/* 8. Button feedback */
.btn{ transition:transform var(--pl-fast) var(--pl-ease), background-color var(--pl-fast) var(--pl-ease), border-color var(--pl-fast) var(--pl-ease); }
.btn:active{ transform:translateY(1px) scale(.99); }

/* 9. Native text balance for headings */
h1,h2,h3{ text-wrap:balance; }

/* 10. Reduced motion: everything resolves to its final state. */
@media (prefers-reduced-motion: reduce){
  @view-transition{ navigation:none; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal,.reveal-fade,.stagger > *{ opacity:1 !important; transform:none !important; }
  .draw path,.draw line,.draw polyline{ stroke-dashoffset:0 !important; }
}