/* Aero synth line, theme build, Sterling 3 Oct 26. Source: Deliverables/2026-10/hero-beam-03Oct26/aero-beam.css (Corrin re-rule, Ren test pass). Jason 14:25 every button incl. email signup; 14:27 white grounds; 14:45 live. 14:53 weight 1px. */
@property --aero-beam-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --aero-beam-glint{syntax:'<number>';inherits:false;initial-value:1}
:is(.button:not(.button--tertiary):not(.skip-to-content-link),.shopify-payment-button__button--unbranded,.newsletter-form__field-wrapper .field):is(.button,.shopify-payment-button__button--unbranded,.field){
--aero-beam-w:1px;--aero-beam-period:7s;--aero-beam-span:150deg;--aero-beam-ring:.2;--aero-beam-min:.7;--aero-beam-line:.95;--aero-beam-bloom:.55;position:relative;
&::before,&::after{content:"";position:absolute;border-radius:inherit;pointer-events:none;box-shadow:none;--s:var(--aero-beam-span);--head:conic-gradient(from var(--aero-beam-a),transparent 0deg,rgb(34 209 75 / .35) calc(var(--s) * .12),rgb(0 183 255 / .65) calc(var(--s) * .27),rgb(61 91 255 / .9) calc(var(--s) * .40),rgb(182 61 255) calc(var(--s) * .51),rgb(255 31 61 / .9) calc(var(--s) * .62),rgb(255 122 0 / .6) calc(var(--s) * .75),rgb(255 212 0 / .55) calc(var(--s) * .84),rgb(34 209 75 / .45) calc(var(--s) * .93),transparent var(--s));animation:aero-beam-turn var(--aero-beam-period) linear infinite,aero-beam-breathe 5.3s ease-in-out infinite alternate}
&::after{inset:0;z-index:2;padding:var(--aero-beam-w);background:var(--head),conic-gradient(from calc(var(--aero-beam-a) - 90deg),rgb(255 31 61 / calc(var(--aero-beam-ring) * 1.07)) 0deg,rgb(255 122 0 / calc(var(--aero-beam-ring) * .55)) 45deg,rgb(255 212 0 / calc(var(--aero-beam-ring) * .325)) 90deg,rgb(34 209 75 / calc(var(--aero-beam-ring) * .445)) 145deg,rgb(0 183 255 / calc(var(--aero-beam-ring) * .485)) 200deg,rgb(61 91 255 / calc(var(--aero-beam-ring) * .975)) 255deg,rgb(182 61 255 / calc(var(--aero-beam-ring) * .87)) 310deg,rgb(255 31 61 / calc(var(--aero-beam-ring) * 1.07)) 360deg);opacity:calc(var(--aero-beam-line) * var(--aero-beam-glint));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
&::before{--band:calc(var(--aero-beam-w) * 2 + 9px);inset:-3px;z-index:1;background:var(--head);filter:blur(calc(var(--aero-beam-w) * 1.5 + 3px));opacity:calc(var(--aero-beam-bloom) * var(--aero-beam-glint));-webkit-mask:linear-gradient(to bottom,#000,transparent var(--band),transparent calc(100% - var(--band)),#000),linear-gradient(to right,#000,transparent var(--band),transparent calc(100% - var(--band)),#000);mask:linear-gradient(to bottom,#000,transparent var(--band),transparent calc(100% - var(--band)),#000),linear-gradient(to right,#000,transparent var(--band),transparent calc(100% - var(--band)),#000)}
&:hover::after,&:focus-visible::after{opacity:1}
&:hover::before,&:focus-visible::before{opacity:calc(var(--aero-beam-bloom) * 1.3)}
& + &::before,& + &::after{animation-delay:calc(var(--aero-beam-period) * -0.45),-2.1s}
@media (prefers-reduced-motion:reduce){&::before,&::after{animation:none}}
}
@keyframes aero-beam-turn{to{--aero-beam-a:-360deg}}
@keyframes aero-beam-breathe{from{--aero-beam-glint:var(--aero-beam-min)}to{--aero-beam-glint:1}}
/* Logo divider lit as the synth line, inside the black divider between AERO and the X. Jason 14:58; 15:07 back inside the line, and no pale colour on the logo only (yellow and pale cyan read as breaks at this size); 15:08 2px so it covers the black divider; 15:10 10% faster; 15:11 lap 5s. Divider measured at 70% across, 16.7% to 82.7% down the logo image. */
.header__heading-logo-wrapper{position:relative}
.header__heading-logo-wrapper::after{content:"";position:absolute;left:calc(70% - 1px);top:calc(16.7% - .5px);bottom:calc(17.3% - .5px);width:2px;pointer-events:none;background:linear-gradient(180deg,#FF1F3D,#FF7A00,#22D14B,#00A0E0,#3D5BFF,#B63DFF,#FF1F3D,#FF7A00,#22D14B,#00A0E0,#3D5BFF,#B63DFF,#FF1F3D);background-size:100% 200%;animation:aero-logo-run 5s linear infinite}
@keyframes aero-logo-run{from{background-position:0 0}to{background-position:0 100%}}
@media (prefers-reduced-motion:reduce){.header__heading-logo-wrapper::after{animation:none}}
/* Dark-scheme text fix, Sterling 15:21 3 Oct 26 (Jason: "rather do that"). base.css ends in a custom block forcing p, li and .rte p to #1A1A1A !important, which beat every colour scheme, so text on dark sections rendered black on black. On the four dark schemes (background-2 #0f0f0f, inverse #aa000d, accent-1 blue, the #111111 custom scheme) text takes the scheme's own colour again. Light schemes keep #1A1A1A. */
:is(.color-background-2,.color-inverse,.color-accent-1,.color-scheme-766ddb8b-4057-4daf-9ae4-2c548893e81c):is(.color-background-2,.color-inverse,.color-accent-1,.color-scheme-766ddb8b-4057-4daf-9ae4-2c548893e81c) :is(p,li,.rte,.rte p,.rich-text__text p,.product__description){color:rgb(var(--color-foreground)) !important}
/* Email signup corners match the hero buttons (8px, the theme's button radius). Jason 15:21 3 Oct 26. */
.newsletter-form__field-wrapper{--inputs-radius:var(--buttons-radius);--inputs-radius-outset:var(--buttons-radius-outset)}
.newsletter-form__field-wrapper .field{border-radius:var(--buttons-radius)}

/* Aero synth line, EMAIL SIGNUP FIELD ONLY: a constant-speed perimeter beam.
   Ren, 3 Oct 26, Jason approved 20:28. DROP-IN: paste AFTER aero-beam-theme.css. Buttons untouched.
   NEEDS ONE MARKUP INSERT (Mack): aero-field-beam-snippet.html goes inside the email field's
   .field element (the one the conic beam sits on now), as its last child.
   Why: the conic beam sweeps a constant ANGLE from the field's centre. On a field about 8:1 that
   lingers on the long edges and flicks past the ends, so it reads as two parallel lines. Here the
   light travels the rounded-rect PERIMETER at constant speed (SVG stroke, pathLength 100,
   stroke-dashoffset), at any field size.
   The same as the buttons: 1 px line, the head's own colours and alphas in order (green leading,
   yellow trailing) over the same 41.7% of the lap as their 150 degrees, 7 s lap, anticlockwise,
   breathe .7 to 1 over 5.3 s, bloom .55 (x1.3 on hover and focus), line .95 (1 on hover and focus).
   Not the same: the faint ring under the head is a static left-to-right spread of the seven ring
   alphas; the buttons' ring turns with the head. Radius 8 px (rx in the snippet) matches
   --buttons-radius as set on 3 Oct 26; if that changes, change rx.
   Reduced motion: the head holds still, whole, at its starting place (each dash carries its own resting offset). */
.newsletter-form__field-wrapper .field.field.field.field::before,
.newsletter-form__field-wrapper .field.field.field.field::after{content:none}
.aero-field-beam{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;
  overflow:hidden;border-radius:inherit;fill:none}
/* a 2 px stroke centred on the edge, half clipped by the box: exactly 1 px of light inside */
.aero-field-beam--line rect{stroke-width:2}
.aero-field-beam--line{opacity:.95;animation:aero-field-breathe-line 5.3s ease-in-out infinite alternate}
.aero-field-beam--bloom{overflow:visible;z-index:1;filter:blur(4.5px);opacity:.55;
  animation:aero-field-breathe-bloom 5.3s ease-in-out infinite alternate}
.aero-field-beam--bloom rect{stroke-width:4}
.aero-field-beam .h{animation:aero-field-run 7s linear infinite}
@keyframes aero-field-run{from{stroke-dashoffset:0}to{stroke-dashoffset:100}}
@keyframes aero-field-breathe-line{from{opacity:calc(.95 * .7)}to{opacity:.95}}
@keyframes aero-field-breathe-bloom{from{opacity:calc(.55 * .7)}to{opacity:.55}}
.newsletter-form__field-wrapper .field:is(:hover,:focus-within) .aero-field-beam--line{animation:none;opacity:1}
.newsletter-form__field-wrapper .field:is(:hover,:focus-within) .aero-field-beam--bloom{animation:none;opacity:.715}
@media (prefers-reduced-motion:reduce){
  .aero-field-beam .h{animation:none}
  .aero-field-beam--line,.aero-field-beam--bloom{animation:none}
}