/* ============================================================
   MODERN LAYER — experimental redesign (loaded after all CSS)
   To fully revert: delete this file, js/modern.js, and the
   <link>/<script> tags referencing them in the 5 HTML files.
   ============================================================ */

/* FILM GRAIN — subtle texture over the whole page */
body::before{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* TEXT SELECTION — brand yellow */
::selection{background:var(--yellow);color:var(--black)}

/* SCROLL PROGRESS BAR */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--black);transform:scaleX(0);transform-origin:0 50%;z-index:200}

/* GLASS NAV — frosted, lifts on scroll */
nav{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);transition:box-shadow .35s}
nav.scrolled{box-shadow:0 10px 30px rgba(10,10,10,.07)}
@media(min-width:961px){
  .nav-links a:not(.nav-btn){position:relative}
  .nav-links a:not(.nav-btn)::after{content:'';position:absolute;left:0;bottom:-5px;width:100%;height:2px;background:var(--black);border-radius:2px;transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.22,1,.36,1)}
  .nav-links a:not(.nav-btn):hover::after,.nav-links a.active:not(.nav-btn)::after{transform:scaleX(1);transform-origin:left}
}

/* HERO ENTRANCE — children rise in with a blur-to-sharp cascade */
#hero .fade-in{opacity:1;transform:none;transition:none}
@keyframes riseIn{from{opacity:0;transform:translateY(28px);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
.hero-badge{animation:riseIn .8s cubic-bezier(.22,1,.36,1) both .05s}
h1{animation:riseIn .9s cubic-bezier(.22,1,.36,1) both .15s}
.hero-sub{animation:riseIn .9s cubic-bezier(.22,1,.36,1) both .3s}
.hero-actions{animation:riseIn .9s cubic-bezier(.22,1,.36,1) both .42s}
.hero-proof{animation:riseIn .9s cubic-bezier(.22,1,.36,1) both .55s}
.hero-visual{animation:riseIn 1s cubic-bezier(.22,1,.36,1) both .35s;position:relative;z-index:2}

/* HERO GLOW — removed (yellow aura behind chart) */
.hero-chart-card{will-change:transform}

/* HIGHLIGHT SHIMMER — the yellow marker slowly breathes */
h1 em,h2 em{background-image:linear-gradient(110deg,#FDF652,#F4E93B,#FDF652);background-size:200% 100%;animation:hlShift 7s ease-in-out infinite}
@keyframes hlShift{0%,100%{background-position:0% 0}50%{background-position:100% 0}}

/* STAGGERED SCROLL REVEALS */
.m-reveal{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.22,1,.36,1) var(--d,0s),transform .75s cubic-bezier(.22,1,.36,1) var(--d,0s)}
.m-reveal.m-in{opacity:1;transform:none}

/* CURSOR SPOTLIGHT — yellow glow follows the mouse on cards */
.m-spot{position:relative}
.m-spot::after{content:'';position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .4s;pointer-events:none;background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),rgba(253,246,82,.22),transparent 65%)}
.m-spot:hover::after{opacity:1}

/* BUTTONS — springy transform + shine sweep */
.btn-yellow,.nav-btn,.ph-booking-btn,.form-submit-btn{transition:transform .22s cubic-bezier(.22,1,.36,1),opacity .2s,box-shadow .25s;position:relative;overflow:hidden}
.btn-yellow:hover,.form-submit-btn:hover{box-shadow:0 12px 28px rgba(10,10,10,.14)}
.btn-yellow::after,.form-submit-btn::after{content:'';position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .55s ease}
.btn-yellow:hover::after,.form-submit-btn:hover::after{left:130%}

/* CARDS — slightly rounder, posts lift on hover */
.process-cards,.services-list,.values-grid,.contact-form-wrap,.ph-booking-card,.gl-visual{border-radius:20px}
.post-card{border-radius:18px}
.post-card:hover{box-shadow:0 18px 48px rgba(0,0,0,.1);transform:translateY(-4px)}

/* SECTION LABELS — small black tick before the text */
.s-label::before{content:'';display:inline-block;width:22px;height:2px;background:var(--black);margin-right:10px;vertical-align:middle}

/* FOOTER LINKS — nudge right on hover */
.footer-links a{display:inline-block;transition:color .2s,transform .25s cubic-bezier(.22,1,.36,1)}
.footer-links a:hover{transform:translateX(4px)}

/* TICKER — pause on hover */
.ticker-bar:hover .ticker-inner{animation-play-state:paused}

/* ACCESSIBILITY — respect reduced-motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .m-reveal{opacity:1;transform:none}
}

/* ============================================================
   LIGHT MODERN ADDITIONS — effects layer kept from the dark
   experiment, tuned for the light theme.
   ============================================================ */

/* Hero layering for canvas */
#hero{position:relative;overflow:hidden}
.hero-left,.hero-right{position:relative;z-index:2}

/* Constellation canvas behind the hero */
.hero-net{position:absolute;inset:0;z-index:1;pointer-events:none}

/* Cursor glow — soft warm orb follows the mouse */
.cursor-glow{position:fixed;top:0;left:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:radial-gradient(circle,rgba(244,222,0,.07),transparent 60%);pointer-events:none;z-index:2}
@media(hover:none){.cursor-glow{display:none}}

/* Ticker — fade edges like a data stream */
.ticker-bar{mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}

/* Service rows — edge line sweeps across on hover */
.service-row{position:relative}
.service-row::before{content:'';position:absolute;top:-1px;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--yellow),transparent);transition:width .45s ease;z-index:1}
.service-row:hover::before{width:100%}

/* Card hover — border darkens slightly */
.process-card:hover,.val-card:hover,.post-card:hover{border-color:rgba(10,10,10,.18)}


/* ============================================================
   ULTRA-WIDE SCREENS — cap content width on 34"/49" monitors
   so layouts don't stretch edge-to-edge. Side padding grows
   to keep the content column centered at ~1500px max.
   Kicks in only above 1500px — normal/mobile untouched.
   ============================================================ */
@media(min-width:1500px){
  nav,
  footer,
  #hero,
  #process,
  #services,
  #cta-band,
  .page-header,
  .blog-header,
  .blog-section,
  .contact-page,
  .post-page,
  section{
    padding-left:max(5vw,calc((100% - 1500px) / 2));
    padding-right:max(5vw,calc((100% - 1500px) / 2));
  }
}