/* ═══════════════════════════════════════════════════════════════
   ERJ · ALIVE LAYER (site-wide)
   Light, colour and motion on top of every page's own design.
   Loaded after each page's styles; never changes copy or layout.

   Rules that keep it safe (see CLAUDE.md, validate-facts.py check 12):
     1. Nothing starts invisible. Motion moves or lights things; it
        never hides content waiting for a script.
     2. Large animated layers are desktop-only. Phones get the same
        look, static — a GPU short of memory paints blank tiles.
     3. prefers-reduced-motion switches every animation off.
   <html data-alive="lite"> (portals, tools) gets colour and hover
   feedback but no hero aurora.
   ═══════════════════════════════════════════════════════════════ */
:root{--al-o:#FF5722;--al-gold:#FFC46B;--al-g:#0D8C4F;}

/* ── scroll progress ── */
.erj-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:100000;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--al-g),var(--al-o) 35%,var(--al-gold));pointer-events:none;}
@media print{.erj-progress,.erj-aurora{display:none!important;}}

/* ── hero aurora (injected by erj-alive.js into the first section) ── */
.erj-lit{position:relative;isolation:isolate;}
.erj-aurora{position:absolute;z-index:-1;top:-80px;bottom:0;left:50%;width:100vw;transform:translateX(-50%);overflow:hidden;pointer-events:none;}
.erj-aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;}
.erj-aurora .a1{width:44vw;height:44vw;max-width:600px;max-height:600px;left:-8vw;top:-12%;background:radial-gradient(circle,rgba(255,87,34,.7),transparent 65%);}
.erj-aurora .a2{width:38vw;height:38vw;max-width:540px;max-height:540px;right:-6vw;top:6%;background:radial-gradient(circle,rgba(255,170,60,.5),transparent 65%);}
.erj-aurora .a3{width:30vw;height:30vw;max-width:440px;max-height:440px;left:40%;bottom:-20%;background:radial-gradient(circle,rgba(13,140,79,.4),transparent 65%);}
.erj-aurora::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,var(--paper,#000) 100%);}
html[data-theme="day"] .erj-aurora i{opacity:.28;}
@media (max-width:900px){.erj-aurora i{filter:blur(50px);opacity:.42;}}

/* ── headings: the accent words glow ── */
:is(h1,h2) em,h2>span:not([class]){
  background:linear-gradient(100deg,var(--al-o) 0%,var(--al-gold) 50%,var(--al-o) 100%);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
html[data-theme="day"] :is(h1,h2) em,html[data-theme="day"] h2>span:not([class]){
  background-image:linear-gradient(100deg,#AD350A 0%,#E8470F 50%,#AD350A 100%);}
.section-label .mark,.lab::before{background:linear-gradient(90deg,var(--al-o),var(--al-gold))!important;}

/* ── photos: lit plates that respond ── */
:is(.hero-photo,.eb-photo,.fr-art,.free-shot,.host-photo,.ln-frame,.bk-cover,.sl-box){
  border-radius:22px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,87,34,.35),0 26px 64px rgba(0,0,0,.34),0 0 60px rgba(255,87,34,.10);
  transform:rotate(-1.2deg);transition:transform .5s var(--ease,cubic-bezier(.22,1,.36,1)),box-shadow .5s;}
:is(.hero-photo,.eb-photo,.fr-art,.free-shot,.host-photo,.ln-frame,.bk-cover,.sl-box):nth-of-type(even){transform:rotate(1.2deg);}
:is(.hero-photo,.eb-photo,.fr-art,.free-shot,.host-photo,.ln-frame,.bk-cover,.sl-box):hover{
  transform:rotate(0) translateY(-6px) scale(1.012);
  box-shadow:0 0 0 1.5px var(--al-o),0 34px 80px rgba(0,0,0,.4),0 0 80px rgba(255,87,34,.22);}
:is(.hero-photo,.eb-photo,.fr-art,.free-shot,.host-photo,.ln-frame,.f-photo) img{transition:transform .8s var(--ease,ease);}
.f-photo{box-shadow:0 0 0 1px rgba(255,87,34,.35),0 26px 64px rgba(0,0,0,.34),0 0 70px rgba(255,87,34,.14);}
html[data-theme="day"] :is(.hero-photo,.eb-photo,.fr-art,.free-shot,.host-photo,.ln-frame,.bk-cover,.sl-box,.f-photo){
  box-shadow:0 0 0 1px rgba(173,53,10,.25),0 22px 50px rgba(10,10,10,.14);}
/* store boxes come alive on hover */
.pcard .p-shot img{transition:transform .6s var(--ease,ease);}
.pcard:hover .p-shot img{transform:scale(1.05) rotate(-1.2deg);}

/* ── cards and rows answer the pointer ── */
:is(.card,.price-card,.track-card,.pcard,.vc,.mini-t,.fc-proof-card,.ts-card,.cmp-row){
  transition:transform .35s var(--ease,ease),box-shadow .35s var(--ease,ease),border-color .35s var(--ease,ease);}
:is(.card,.price-card,.track-card,.pcard,.vc,.mini-t,.fc-proof-card,.ts-card):hover{
  transform:translateY(-4px);border-color:rgba(255,87,34,.55);box-shadow:0 22px 52px rgba(255,87,34,.16);}
.price-card.feature{box-shadow:0 0 0 1px rgba(255,87,34,.5),0 26px 70px rgba(255,87,34,.18);}
.price-now,.p-amount,.stat-num,.proof-n,.timer-num{
  background:linear-gradient(150deg,var(--ink,#fff) 30%,var(--al-o) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
html[data-theme="day"] :is(.price-now,.p-amount,.stat-num,.proof-n,.timer-num){background-image:linear-gradient(150deg,#0A0A0A 30%,#AD350A 100%);}
.stage-num,.joint-n,.rung-n{text-shadow:0 0 28px rgba(255,87,34,.35);}

/* ── things you can click look clickable ── */
.btn-primary-ui{box-shadow:0 10px 28px rgba(255,87,34,.28)!important;}
.btn-secondary-ui:hover{box-shadow:0 14px 34px rgba(255,87,34,.25)!important;}
.p-add{transition:transform .25s var(--ease,ease),box-shadow .25s;}
.p-add:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(255,87,34,.3);}

/* ── motion: desktop only, never for reduced-motion ── */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .erj-aurora .a1{animation:alDrift1 18s ease-in-out infinite alternate;will-change:transform;}
  .erj-aurora .a2{animation:alDrift2 22s ease-in-out infinite alternate;will-change:transform;}
  .erj-aurora .a3{animation:alDrift3 26s ease-in-out infinite alternate;will-change:transform;}
  :is(h1,h2) em,h2>span:not([class]){animation:alShine 8s linear infinite;}
  :is(.hero-photo,.eb-photo,.host-photo,.f-photo,.free-shot) img{animation:alKen 16s ease-in-out infinite alternate;}
  .btn-primary-ui:not(:hover){animation:alGlow 3.4s ease-in-out infinite;}
}
@keyframes alDrift1{to{transform:translate3d(10vw,6vh,0) scale(1.15);}}
@keyframes alDrift2{to{transform:translate3d(-8vw,10vh,0) scale(.9);}}
@keyframes alDrift3{to{transform:translate3d(-12vw,-8vh,0) scale(1.2);}}
@keyframes alShine{to{background-position:-200% 0;}}
@keyframes alKen{from{transform:scale(1);}to{transform:scale(1.06) translateY(-1.5%);}}
@keyframes alGlow{0%,100%{box-shadow:0 10px 28px rgba(255,87,34,.22);}50%{box-shadow:0 12px 40px rgba(255,87,34,.45);}}
@media (prefers-reduced-motion:reduce){
  :is(.hero-photo,.eb-photo,.fr-art,.free-shot,.host-photo,.ln-frame,.bk-cover,.sl-box){transform:none!important;}
}