/* ============================================================
   PetrAnto — shared site shell (banner, landing, section pages)
   Loaded by /, /money, /art, /tech. The /x gallery has its own
   styles and will be folded into this shell in a later pass.
   ============================================================ */

:root{
  --bg:#08090d; --bg-2:#0d1017;
  --panel:rgba(255,255,255,.028); --panel-2:rgba(255,255,255,.05);
  --line:rgba(160,175,215,.13);
  --text:#e9edf8; --muted:#9aa4c2; --faint:#6b748f;
  --focus:#8ab8ff;
  --radius:18px;
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  /* theme accents (rgb triplets) */
  --c-money:240,212,148;
  --c-art:201,166,255;
  --c-tech:143,216,255;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--text); font-family:var(--font); line-height:1.55;
  background:
    radial-gradient(1100px 640px at 80% -12%, rgba(190,140,255,.10), transparent 60%),
    radial-gradient(900px 620px at 10% 6%, rgba(80,110,255,.06), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 44%);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh;
}
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:8px; }
img{ max-width:100%; display:block; }
.wrap{ max-width:1240px; margin:0 auto; padding:0 clamp(16px,3.5vw,30px); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ===================== Top banner (shared) ===================== */
.banner{
  position:relative; z-index:3; view-transition-name:banner;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(6,7,10,.28), rgba(6,7,10,.5)),
    url("/assets/banner-desktop.webp") center / cover no-repeat,
    linear-gradient(180deg,#0c0d12,#070809);
  overflow:hidden;
}
@media (max-width:760px){
  .banner{
    background:
      linear-gradient(180deg, rgba(6,7,10,.28), rgba(6,7,10,.5)),
      url("/assets/banner-mobile.webp") center / cover no-repeat,
      linear-gradient(180deg,#0c0d12,#070809);
  }
}
.banner-inner{
  position:relative; max-width:1240px; margin:0 auto; padding:9px clamp(16px,3.5vw,30px) 8px;
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
}
.logo{
  position:relative; display:inline-flex; align-items:center;
  padding:6px 16px; border:1px solid rgba(200,205,225,.28); border-radius:11px;
  background:linear-gradient(180deg, rgba(20,22,30,.85), rgba(8,9,13,.85)); overflow:hidden;
}
.logo img{ height:clamp(22px,4.6vw,32px); width:auto; display:block; }
.logo::after{  /* sheen sweep */
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent);
  transform:skewX(-18deg); animation:sheen 5.5s ease-in-out infinite;
}
.tagline{
  margin:0; font-family:var(--mono); font-weight:600;
  font-size:clamp(.62rem,1.7vw,.9rem); letter-spacing:.14em; text-transform:uppercase;
  color:#aeb6cf;
}
.tagline b{ color:#e9edf8; font-weight:700; }
.tagline .sep{ color:var(--faint); margin:0 .5ch; }

/* ===================== Landing: theme bands ===================== */
.hero-tag{
  text-align:center; padding:clamp(20px,4vw,36px) 0 clamp(10px,2vw,18px);
}
.hero-tag h1{
  margin:0; font-size:clamp(1.6rem,4.4vw,2.4rem); font-weight:800; letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff 25%,#c8d0ea 80%); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-tag p{ margin:8px auto 0; max-width:36em; color:var(--muted); font-size:clamp(.9rem,2vw,1rem); }

.bands{
  display:flex; flex-direction:column; gap:clamp(12px,1.8vw,18px);
  padding:clamp(8px,2vw,18px) 0 clamp(40px,6vw,64px);
}
.band{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:clamp(120px,20vw,200px); border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); isolation:isolate;
  background-size:cover; background-position:center;
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease, filter .28s ease;
  animation:reveal .7s cubic-bezier(.2,.7,.2,1) both;
}
.band:nth-child(1){ animation-delay:.05s; } .band:nth-child(2){ animation-delay:.15s; } .band:nth-child(3){ animation-delay:.25s; }
/* placeholder band artwork (swapped for real images later) */
.band.money,.band-header.money{ background:radial-gradient(120% 160% at 30% 30%, rgba(var(--c-money),.16), transparent 55%), linear-gradient(120deg,#141207,#0b0a06); }
.band.art,.band-header.art{     background:radial-gradient(120% 160% at 50% 40%, rgba(var(--c-art),.16), transparent 55%), linear-gradient(120deg,#0f0a16,#0a0710); }
.band.tech,.band-header.tech{   background:radial-gradient(120% 160% at 70% 40%, rgba(var(--c-tech),.16), transparent 55%), linear-gradient(120deg,#06121a,#05080d); }
.band-word{
  font-family:var(--mono); font-weight:800; letter-spacing:.06em; font-size:clamp(2rem,8vw,4.4rem);
  -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 2px 18px rgba(0,0,0,.5));
}
.money .band-word{ background:linear-gradient(180deg,#fff3cf,#e6c66a 55%,#a9843f); -webkit-background-clip:text; background-clip:text; }
.art .band-word{   background:linear-gradient(90deg,#8ad,#c9a6ff,#7ce7a9,#f0d494); -webkit-background-clip:text; background-clip:text; }
.tech .band-word{  background:linear-gradient(180deg,#dff4ff,#8fd8ff 55%,#49d0c0); -webkit-background-clip:text; background-clip:text; }
.band .enter{
  position:absolute; right:clamp(14px,3vw,26px); bottom:clamp(12px,2.5vw,20px);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text); opacity:0; transform:translateX(-6px); transition:opacity .25s, transform .25s;
}
.band::after{  /* accent glow ring on hover */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px transparent; transition:box-shadow .28s ease;
}
.band.money:hover, .band.money:focus-visible{ box-shadow:0 24px 60px -22px rgba(var(--c-money),.5); }
.band.art:hover, .band.art:focus-visible{ box-shadow:0 24px 60px -22px rgba(var(--c-art),.5); }
.band.tech:hover, .band.tech:focus-visible{ box-shadow:0 24px 60px -22px rgba(var(--c-tech),.5); }
.band:hover, .band:focus-visible{ transform:translateY(-4px) scale(1.006); filter:brightness(1.06); }
.band.money:hover{ border-color:rgba(var(--c-money),.5); } .band.art:hover{ border-color:rgba(var(--c-art),.5); } .band.tech:hover{ border-color:rgba(var(--c-tech),.5); }
.band:hover .enter, .band:focus-visible .enter{ opacity:1; transform:translateX(0); }

/* ===================== Landing: stacked bands ===================== */
.stack{
  position:relative; max-width:1040px; margin:clamp(14px,3vw,26px) auto 0;
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);
  animation:reveal .7s cubic-bezier(.2,.7,.2,1) both;
}
.stack-img{ width:100%; height:auto; display:block; }
.stack-zones{ position:absolute; inset:0; display:grid; grid-template-rows:1fr 1fr 1fr; }
.zone{ position:relative; display:flex; align-items:center; justify-content:flex-end; padding:0 clamp(16px,3vw,32px); }
.zone::after{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .28s ease;
  background:radial-gradient(120% 150% at 50% 50%, rgba(var(--a),.18), rgba(var(--a),.05));
}
.zone:hover::after, .zone:focus-visible::after{ opacity:1; }
.zone-cta{
  position:relative; z-index:1; font-family:var(--mono); font-size:clamp(.62rem,1.5vw,.76rem);
  letter-spacing:.16em; text-transform:uppercase; color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.85);
  opacity:0; transform:translateX(-6px); transition:opacity .25s, transform .25s;
}
.zone:hover .zone-cta, .zone:focus-visible .zone-cta{ opacity:1; transform:translateX(0); }

/* Landing hover geckos: slide in from the left when a band is hovered */
.gecko-layer{ position:fixed; inset:auto auto 0 0; z-index:0; pointer-events:none; }
.hover-gecko{
  position:fixed; left:0; bottom:0; height:min(calc(100svh - 170px), 980px); width:auto;
  transform:translateX(-105%); transition:transform .5s cubic-bezier(.2,.7,.2,1);
  filter:drop-shadow(0 20px 42px rgba(0,0,0,.55)); will-change:transform;
}
body[data-gecko="money"] .hover-gecko[data-for="money"],
body[data-gecko="art"]   .hover-gecko[data-for="art"],
body[data-gecko="tech"]  .hover-gecko[data-for="tech"],
body[data-gecko="x"]     .hover-gecko[data-for="x"]{ transform:translateX(-42%); }
main.wrap{ position:relative; z-index:1; }

/* X panel linking to /x — vertical inside the main frame (top-right, under
   the banner) on desktop; horizontal bar fixed at the bottom of the screen
   on mobile (always visible while scrolling). */
.side-rail{ display:none; position:absolute; top:10px; right:clamp(16px,3.5vw,30px); z-index:5; line-height:0; }
.side-rail picture{ display:block; }
.side-rail img{
  height:min(500px, 80svh); width:auto; display:block; border-radius:14px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.side-rail:hover img, .side-rail:focus-visible img{
  transform:translateY(-3px); box-shadow:0 14px 40px -12px rgba(120,190,255,.45);
}
@media (min-width:1200px){
  /* Panel height == height of the landing's 3-band stack, identical on every
     page. Solved from: stackW*(1 + panelRatio*stackRatio) + gap = content
     width; stack ratio 958/1642, panel ratio 185/642 (trimmed art). */
  body.has-rail{ --railH:min(calc((min(1240px, 100vw) - 76px) * 0.4995), 84svh); }
  body.has-rail main.wrap{ padding-right:calc(46px + var(--railH) * 0.2882); }
  body.has-rail .side-rail{ display:block; top:2px; right:30px; }
  body.has-rail .side-rail img{ height:var(--railH); border-radius:20px; }
  /* Section pages: panel hugs the right edge of the viewport, not the wrap */
  body.has-rail main.wrap:has(.section){ padding-right:max(30px, calc(256px - max(0px, (100vw - 1460px) / 2))); }
  body.has-rail:has(.section) .side-rail{ right:calc((100% - 100vw) / 2 + 26px); }
}
@media (max-width:1199.98px){
  body.has-rail .side-rail{
    display:block; position:fixed; top:auto; right:auto; left:50%;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 10px);
    transform:translateX(-50%); z-index:40; width:min(300px, 82vw);
  }
  body.has-rail .side-rail img{
    height:auto; width:100%; border-radius:14px;
    box-shadow:0 10px 34px rgba(0,0,0,.65);
  }
  body.has-rail{ padding-bottom:calc(env(safe-area-inset-bottom, 0px) + min(300px, 82vw) * 0.34 + 26px); }
}

/* ===================== Quick section nav (under the banner) ===================== */
.quicknav{
  display:flex; gap:clamp(8px,1.4vw,14px); justify-content:center; align-items:center;
  max-width:1240px; margin:14px auto 0; padding:0 clamp(16px,3.5vw,30px);
}
.qn{
  position:relative; flex:1 1 0; max-width:300px; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); line-height:0;
  transition:transform .22s cubic-bezier(.2,.7,.2,1), border-color .22s, box-shadow .22s;
}
.qn img{ width:100%; height:auto; display:block; }
.qn::after{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .25s ease;
  background:radial-gradient(120% 150% at 50% 50%, rgba(var(--a),.2), rgba(var(--a),.05));
}
.qn:hover::after, .qn:focus-visible::after{ opacity:1; }
.qn:hover, .qn:focus-visible{ transform:translateY(-2px); border-color:rgba(var(--a),.5); box-shadow:0 10px 26px -12px rgba(var(--a),.45); }
/* the current section's band doubles as the page title: centered and larger */
.qn[aria-current="page"]{
  flex:1.9 1 0; max-width:520px;
  border-color:rgba(var(--a),.55);
  box-shadow:0 0 26px -6px rgba(var(--a),.5), 0 10px 30px -14px rgba(0,0,0,.6);
}

/* ===================== Section pages ===================== */
/* section pages use a wider container so the content column breathes */
main.wrap:has(.section){ max-width:1460px; }
.section{
  display:grid; grid-template-columns:minmax(260px,42%) minmax(0,1fr);
  gap:clamp(8px,2vw,32px); align-items:end;
  min-height:calc(100svh - 170px);
}
/* mascot: fills the full page height below the banner, base anchored to the
   bottom; if wider than its column it bleeds off-screen to the left. */
.mascot{ align-self:end; display:flex; justify-content:flex-end; animation:reveal .8s cubic-bezier(.2,.7,.2,1) both; }
.mascot img{
  height:min(calc(100svh - 170px), 980px); width:auto; max-width:none; display:block;
  filter:drop-shadow(0 20px 42px rgba(0,0,0,.55));
  animation:float 8s ease-in-out infinite;
}
.section-main{ min-width:0; align-self:start; padding:clamp(18px,4vw,40px) 0 clamp(40px,6vw,72px); }
.band-header{
  position:relative; border-radius:var(--radius); overflow:hidden; line-height:0;
  border:1px solid var(--line); margin-bottom:clamp(18px,3vw,28px);
  animation:reveal .7s cubic-bezier(.2,.7,.2,1) both;
}
.band-header img{ width:100%; height:auto; display:block; }
.projects{ display:flex; flex-direction:column; gap:clamp(12px,1.8vw,16px); }
.project{
  display:flex; align-items:center; gap:clamp(14px,2.5vw,22px);
  padding:clamp(14px,2.2vw,20px); border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012) 60%);
  transition:transform .22s cubic-bezier(.2,.7,.2,1), border-color .22s, box-shadow .22s;
  animation:reveal .6s cubic-bezier(.2,.7,.2,1) both;
}
.projects .project:nth-child(2){ animation-delay:.08s; } .projects .project:nth-child(3){ animation-delay:.16s; } .projects .project:nth-child(4){ animation-delay:.24s; }
a.project:hover{ transform:translateY(-3px); border-color:rgba(var(--a),.5); box-shadow:0 18px 44px -20px rgba(var(--a),.4); }
.project-logo{
  flex:0 0 auto; width:clamp(64px,14vw,96px); height:clamp(64px,14vw,96px);
  border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.03);
  display:grid; place-items:center; overflow:hidden;
  font-family:var(--mono); font-size:.62rem; color:var(--faint); letter-spacing:.1em; text-align:center;
}
.project-logo img{ width:100%; height:100%; object-fit:contain; }
.project-body{ min-width:0; flex:1; }
.project-name{ margin:0; font-size:clamp(1rem,2.4vw,1.2rem); font-weight:700; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.project-desc{ margin:5px 0 0; color:var(--muted); font-size:clamp(.86rem,2vw,.95rem); }
.badge{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:#ffd66b; border:1px dashed rgba(255,214,107,.5); border-radius:999px; padding:3px 10px; white-space:nowrap;
}
.project .go{ margin-left:auto; color:rgb(var(--a)); font-family:var(--mono); font-size:1.1rem; opacity:.8; transition:transform .22s; }
a.project:hover .go{ transform:translateX(4px); }

.back{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-bottom:6px;
  color:var(--muted); font-size:.86rem; font-weight:600; font-family:var(--mono);
}
.back:hover{ color:var(--text); }

/* ===================== NFT collections (Art page) ===================== */
.collections-block{ margin-top:clamp(20px,3vw,30px); }
.coll-label{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--faint); display:flex; align-items:center; gap:10px; margin:0 0 13px;
}
.coll-label::after{ content:""; height:1px; flex:1; background:var(--line); }
.collections{ display:flex; flex-wrap:wrap; gap:9px; }
.coll{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px; min-height:38px;
  border:1px solid var(--line); border-radius:999px; background:var(--panel);
  font-size:.84rem; font-weight:600; color:var(--muted);
  transition:color .18s, border-color .18s, background .18s, transform .18s;
}
.coll span{ color:rgba(var(--a),.8); font-size:.76rem; }
.coll:hover, .coll:focus-visible{
  color:var(--text); border-color:rgba(var(--a),.5); background:var(--panel-2); transform:translateY(-2px);
}

/* ===================== Mascot trait effects ===================== */
/* Animated beams from a mascot's signature traits to their app/link targets
   (built by /assets/trait-fx.js from each page's TRAIT_FX config). */
.section{ position:relative; }
.trait-fx{ position:absolute; inset:0; pointer-events:none; z-index:2; overflow:visible; }
.fx-beam{
  fill:none; stroke-width:2; opacity:.5; stroke-linecap:round;
  stroke-dasharray:7 9; animation:fxflow 1.3s linear infinite;
  transition:opacity .25s ease, stroke-width .25s ease;
}
.fx-beam.hot{ opacity:.95; stroke-width:3; }
.fx-dot{ opacity:1; }
.fx-pulse{ r:6; opacity:.55; animation:fxpulse 2.6s ease-in-out infinite; }
@keyframes fxflow{ to{ stroke-dashoffset:-16; } }
@keyframes fxpulse{ 0%,100%{ opacity:.3; r:5; } 50%{ opacity:.85; r:12; } }

/* ===================== Footer ===================== */
footer.site{
  border-top:1px solid var(--line); padding:26px clamp(16px,3.5vw,30px) 40px;
  max-width:1240px; margin:0 auto; display:flex; flex-wrap:wrap; gap:10px 22px;
  align-items:center; justify-content:space-between; color:var(--faint); font-size:.82rem;
}
footer.site a{ color:var(--muted); } footer.site a:hover{ color:var(--text); text-decoration:underline; }

/* ===================== Animations ===================== */
@keyframes reveal{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@keyframes sheen{ 0%{ left:-60%; } 22%,100%{ left:130%; } }

@view-transition{ navigation:auto; }

/* Stacked layout: small screens, and any portrait viewport (covers phones
   in desktop-site mode that report a ~980px virtual viewport). */
@media (max-width:900px), (orientation:portrait) and (max-width:1100px){
  .section{ grid-template-columns:1fr; min-height:0; }
  .mascot{ justify-content:center; margin:0 auto; }
  .mascot img{ height:auto; width:min(360px,78vw); max-width:100%; }
  .section-main{ padding-top:0; }
  .gecko-layer{ display:none; }
  .trait-fx{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .band:hover, .band:focus-visible{ transform:none; }
  .trait-fx{ display:none; }
}