/* One continuous, quiet surface for reading pages. The fixed coordinate system
   prevents a visible join where the full-height profile scene meets the document. */
:root{
  --ambient-noise:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.034'/%3E%3C/svg%3E");
  --profile-bgA:#08161b;
  --profile-bgB:#10272c;
  --profile-bgC:#091b22;
  --profile-glowA:#3c8992;
  --profile-glowB:#20556f;
  --profile-glowC:#236169;
}

/* A quieter navigation surface with enough separation on both light and dark scenes. */
.global-nav,
.site-header.is-collection .global-nav{
  background:rgba(10,15,17,.66);
  border-color:rgba(255,255,255,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 20px rgba(0,0,0,.17);
  -webkit-backdrop-filter:blur(14px) saturate(115%);
  backdrop-filter:blur(14px) saturate(115%);
}
.global-nav::before{opacity:.28}
.global-nav__indicator{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 3px 10px rgba(0,0,0,.12);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

body[data-page="profile"]{
  /* feralui-home.js replaces these as one matched set. The defaults keep the
     local file complete when scripting is unavailable. */
  --ambient-base:var(--profile-bgA);
  --ambient-surface:
    linear-gradient(rgba(5,11,13,.22),rgba(5,11,13,.34)),
    var(--ambient-noise),
    radial-gradient(ellipse 68% 54% at 82% 3%,color-mix(in srgb,var(--profile-glowA) 20%,transparent),transparent 72%),
    radial-gradient(ellipse 66% 66% at 6% 92%,color-mix(in srgb,var(--profile-glowB) 18%,transparent),transparent 72%),
    radial-gradient(ellipse 54% 46% at 58% 54%,color-mix(in srgb,var(--profile-glowC) 10%,transparent),transparent 75%),
    linear-gradient(132deg,var(--profile-bgA) 0%,var(--profile-bgB) 49%,var(--profile-bgC) 100%);
  background-color:var(--ambient-base);
  background-image:var(--ambient-surface);
  background-attachment:fixed;
  background-repeat:no-repeat,repeat,no-repeat,no-repeat,no-repeat,no-repeat;
  transition:background-color .75s cubic-bezier(.22,1,.36,1);
}

/* The curtain and the reading scene are both opaque. This is an invariant:
   the animated hero must never be able to bleed through after a direct hash
   load, an interrupted transition, or a browser back/forward restore. */
body[data-page="profile"] .scene-curtain{
  background-color:var(--ambient-base);
  background-image:var(--ambient-surface);
  background-attachment:fixed;
  background-repeat:no-repeat,repeat,no-repeat,no-repeat,no-repeat,no-repeat;
  transition:background-color .75s cubic-bezier(.22,1,.36,1);
}
body[data-page="profile"] .resume-scene{
  background-color:var(--ambient-base);
  background-image:var(--ambient-surface);
  background-attachment:fixed;
  background-repeat:no-repeat,repeat,no-repeat,no-repeat,no-repeat,no-repeat;
  background-blend-mode:normal,soft-light,normal,normal,normal,normal;
}
body[data-page="profile"] .resume-scene::before{display:none}
html[data-entry="resume"] body[data-page="profile"] .hero-scene{
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
html[data-entry="resume"] body[data-page="profile"] .resume-scene{
  visibility:visible!important;
  opacity:1!important;
}
body[data-page="profile"] .sequence,
body[data-page="profile"] .resume-rest,
body[data-page="profile"] .destination-section,
body[data-page="profile"] .site-footer{background-color:transparent}

/* Subtle page-specific colour, kept below the contrast of the content. */
body[data-page="experience"],
body[data-page="portfolio"],
body[data-page="contact"]{
  --ambient-base:#0b1113;
  --ambient-a:rgba(53,91,86,.13);
  --ambient-b:rgba(41,66,82,.11);
  background-color:var(--ambient-base);
  background-image:
    linear-gradient(rgba(6,9,10,.30),rgba(7,10,11,.40)),
    var(--ambient-noise),
    radial-gradient(ellipse 72% 56% at 86% 2%,var(--ambient-a),transparent 72%),
    radial-gradient(ellipse 70% 68% at 3% 94%,var(--ambient-b),transparent 74%),
    linear-gradient(135deg,#0a1214 0%,#10191a 52%,#0a1114 100%);
  background-attachment:fixed;
  background-repeat:no-repeat,repeat,no-repeat,no-repeat,no-repeat;
}
body[data-page="experience"]{--ambient-a:rgba(98,112,73,.13);--ambient-b:rgba(42,74,72,.10)}
body[data-page="portfolio"]{--ambient-a:rgba(51,76,91,.13);--ambient-b:rgba(55,76,66,.09)}
body[data-page="contact"]{--ambient-a:rgba(60,96,91,.14);--ambient-b:rgba(45,67,84,.10)}

body[data-page="experience"] #app,
body[data-page="experience"] .landing,
body[data-page="experience"] .page,
body[data-page="portfolio"] .collection,
body[data-page="contact"] main{background:transparent}

body[data-page="experience"] .destination-section,
body[data-page="portfolio"] .destination-section,
body[data-page="contact"] .destination-section{
  background:transparent;
}
body[data-page="experience"] .destination-section::before,
body[data-page="portfolio"] .destination-section::before,
body[data-page="contact"] .destination-section::before{
  background:none;
}
body[data-page="experience"] .site-footer,
body[data-page="portfolio"] .site-footer,
body[data-page="contact"] .site-footer{
  --footer-bg:transparent;
  background:var(--footer-bg);
  border-top-color:rgba(224,229,224,.11);
}

body[data-page="contact"] .detail-intro{color:#b5bab6}
body[data-page="contact"] .detail-kicker,
body[data-page="contact"] .detail-note{color:#949b96}
body[data-page="contact"] .contact-links a span{color:#b8c3bf}

@media(max-width:800px){
  body[data-page="profile"],
  body[data-page="experience"],
  body[data-page="portfolio"],
  body[data-page="contact"],
  body[data-page="profile"] .scene-curtain,
  body[data-page="profile"] .resume-scene{background-attachment:scroll}
  body[data-page="profile"] .scene-curtain,
  body[data-page="profile"] .resume-scene{background-position:0 0}
}

@media(prefers-reduced-motion:reduce){
  body[data-page="profile"],
  body[data-page="experience"],
  body[data-page="portfolio"],
  body[data-page="contact"]{background-attachment:scroll}
}