/*
Theme Name: AwakeSociety Landing
Theme URI: https://example.com/
Author: AwakeSociety
Author URI: https://example.com/
Description: One-page landing theme (slider + modal) based on provided AwakeSociety HTML/CSS.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: awakesociety-landing
Tags: one-column, custom-background, custom-logo
*/

    :root{
      --bg:#0b0b0b;
      --text:#eaeaea;
      --muted:#9a9a9a;
      --accent:#c1ff00;
      --shadow:0 20px 60px rgba(0,0,0,.6);
      --container:min(1200px, calc(100vw - 64px));
      --navH:72px;
    }

    *{box-sizing:border-box}
    html,body{height:100%;}
    html{overflow:hidden; overscroll-behavior:none}
    body{
      margin:0;
      font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:var(--bg);
      color:var(--text);
      overflow:hidden;
      display:flex;
      flex-direction:column;
    }
    
    /* WordPress Admin Bar – Allow it to render above everything */
    body.wp-toolbar {
      overflow: visible !important;
      position: relative;
    }
    
    #wpadminbar {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      z-index: 99999 !important;
      width: 100% !important;
      height: auto !important;
      min-height: 32px !important;
    }

    /* NAVBAR – calm museum style */
    .nav{
      position:sticky;
      top:0;
      z-index:50;
      height:var(--navH);
      background:rgba(12,12,12,.78);
      backdrop-filter: blur(12px);
      display:flex;
      align-items:center;
      border-bottom:none;
      flex:0 0 auto;
      isolation:isolate;
    }
    /* remove animated sweep entirely */
    
    .nav__inner{
      width:var(--container);
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      min-width:0;
    }

    .brand{
      display:flex;
      align-items:baseline;
      gap:10px;
      font-weight:720;
      letter-spacing:.14em;
      text-transform:uppercase;
      font-size:13px;
      white-space:nowrap;
    }
    .brand span{font-weight:650; color:var(--accent); letter-spacing:.16em;}

    a.brand{
      text-decoration: none;
      color: var(--text);
    }

    a.brand:visited{
      text-decoration: none;
      color: var(--text);
    }

    .menu{
      display:flex;
      align-items:center;
      gap:52px;
      font-size:19px;
      letter-spacing:.18em;
      white-space:nowrap;
    }
    .navLink{
      position:relative;
      background:transparent;
      border:0;
      padding:10px 4px;
      cursor:pointer;
      color:rgba(255,255,255,.90);
      font:inherit;
      letter-spacing:inherit;
      font-weight:700;
      -webkit-tap-highlight-color: transparent;
      transition:color .18s ease, opacity .18s ease;
      opacity:.92;
		text-decoration: none;
    }
        .navLink:hover{opacity:1; color:#fff; text-decoration:none;}
    .navLink:hover::after{opacity:1; background:rgba(193,255,0,.55); text-decoration:none;}
    .navLink[aria-current="true"]{color:var(--accent); opacity:1}
    .navLink[aria-current="true"]::after{opacity:1; background:rgba(193,255,0,.85)}

    .pill{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 14px;
      border-radius:999px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.14);
      font-weight:650;
      font-size:12px;
      color:rgba(255,255,255,.88);
      cursor:pointer;
      letter-spacing:.10em;
      text-transform:uppercase;
      user-select:none;
      -webkit-tap-highlight-color: transparent;
      flex:0 0 auto;
      transition:border-color .2s ease, color .2s ease, background .2s ease;
    }
    .pill:hover{border-color:rgba(193,255,0,.55); color:var(--accent); background:rgba(193,255,0,.08)}
    .dot{width:9px; height:9px; border-radius:99px; background:var(--accent); box-shadow:none}

/* SLIDER RAIL */
    main{flex:1 1 auto; min-height:0; display:flex; flex-direction:column;}
    .rail{position:relative; flex:1 1 auto; min-height:0; overflow:hidden;}

    .slides{
      height:100%;
      display:flex;
      overflow-x:auto;
      overflow-y:hidden;
      scroll-snap-type:x mandatory;
      scroll-behavior:smooth;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    .slides::-webkit-scrollbar{display:none}

    .slide{
      position:relative;
      flex:0 0 100vw;
      height:100%;
      scroll-snap-align:start;
      overflow:hidden;
      background:#111;
    }

    .bg{
      position:absolute;
      inset:0;
      background:
        linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.55) 65%, rgba(0,0,0,.90)),
        var(--bgimg);
      background-size:cover;
      background-position:center;
      filter:saturate(1.05);
      transform:scale(1.02);
      animation: drift 16s ease-in-out infinite alternate;
    }

    /* Project-only chrome */
    .frame{position:absolute; inset:18px; border-radius:20px; border:2px solid rgba(255,255,255,.22); pointer-events:none;}
    .counter{
      position:absolute;
      top:32px;
      right:32px;
      z-index:6;
      pointer-events:none;
      color:rgba(255,255,255,.75);
      font-size:12px;
      letter-spacing:.24em;
      text-transform:uppercase;
      text-shadow:0 8px 24px rgba(0,0,0,.4);
    }

    /* Project hero */
    .content{
		display: flex;
      position:absolute;
      left:48px;
      bottom:46px;
      max-width: 100%;
      color:#fff;
      z-index:4;
      animation: contentIn .9s cubic-bezier(.2,.9,.2,1) .1s both;
		gap: 20px;
		flex-wrap:wrap;
    }
    .title{
      margin:0;
      font-size:58px;
      line-height:1.02;
      letter-spacing:-.02em;
      font-weight:750;
      text-shadow:0 10px 30px rgba(0,0,0,.35);
      opacity:0;
      transform: translateY(10px);
      animation: fadeUp .75s cubic-bezier(.2,.9,.2,1) .15s both;
      display:flex;
      align-items:center;
      gap:18px;
	  white-space:nowrap;
		flex-wrap: wrap;
    }
    .sub{
      margin:14px 0 0;
      font-size:22px;
      font-weight:600;
      opacity:0;
      transform: translateY(10px);
      animation: fadeUp .75s cubic-bezier(.2,.9,.2,1) .28s both;
    }
    .body{
      margin:14px 0 0;
      font-size:13.5px;
      line-height:1.55;
      max-width:460px;
      opacity:0;
      transform: translateY(10px);
      animation: fadeUp .75s cubic-bezier(.2,.9,.2,1) .38s both;
		text-transform: uppercase;
		opacity: .3 !important;
    }

    /* Inline play button next to title */
    .playBtn{
		
      position:relative;
      border-radius:999px;
      border:none;
      background:var(--accent);
      display:grid;
      place-items:center;
      cursor:pointer;
      z-index:8;
      -webkit-tap-highlight-color: transparent;
      box-shadow:0 14px 40px rgba(0,0,0,.55);
      transition:transform .15s ease, box-shadow .2s ease;
      flex:0 0 auto;
	padding: 8px 20px;
    font-size: 20px;
		color: black;
		margin-top: 12px;
    }
    .playBtn:hover{transform:translateY(-1px); box-shadow:0 16px 44px rgba(0,0,0,.62)}
    .playBtn:active{transform:translateY(0) scale(.98)}
    .playBtn svg{width:26px; height:26px; fill:#000; margin-left:3px}

    /* Global pages (PRICE / TEAM / CONTACT) – screenshot style */
    .page{
      position:absolute;
      inset:0;
      z-index:6;
        overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
      padding:34px 26px 54px;
      /* background:rgba(0,0,0,.22); */
      backdrop-filter: blur(10px);
    }

    .section{max-width:var(--container); margin:0 auto;}
    .sectionTitle{
      margin:6px 0 10px;
      text-align:center;
      font-size:64px;
      letter-spacing:-.02em;
      line-height:1.02;
      font-weight:780;
    }
    .sectionLead{
      margin:0 auto;
      text-align:center;
      color:var(--muted);
      line-height:1.85;
      max-width:78ch;
      font-size:16px;
		    margin-bottom: 40px;
}
    }

    /* Investment */
    .priceCard{
      width:min(980px, 100%);
      border-radius:24px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      box-shadow:0 28px 90px rgba(0,0,0,.55);
      padding:34px 34px 28px;
    }
    .investmentWrap{display:flex; justify-content:center;}
    .priceValue{
      text-align:center;
      font-size:74px;
      font-weight:800;
      letter-spacing:-.02em;
    }
    .priceValue small{font-size:.54em; font-weight:750; opacity:.9}
    .priceUnit{color:var(--muted); text-align:center; margin:0 0 14px; font-size:13px; font-style: italic;}
    .priceNote{color:var(--muted); text-align:center; line-height:1.75; max-width:70ch; margin:40px 20px;}
    .divider{height:1px; background:rgba(255,255,255,.10); margin:22px 0 18px;}
    .includedTitle{text-align:center; font-weight:750; letter-spacing:.02em; margin:24px 0px;}
    .includedGrid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 26px; max-width:780px; margin:0 auto;}
    .checkItem{display:flex; gap:12px; align-items:flex-start; color:var(--muted); line-height:1.55;}
    .checkIcon{
      width:22px; height:22px; border-radius:999px;
      background:rgba(193,255,0,.18);
      border:1px solid rgba(193,255,0,.55);
      display:grid; place-items:center;
      flex:0 0 auto;
      margin-top:1px;
    }
    .checkIcon svg{width:14px; height:14px; stroke:var(--accent);}
    .ctaRow{display:flex; justify-content:center; margin-top:22px;}
    .ctaBtn{
      display:inline-flex;
      gap:10px;
      align-items:center;
      padding:14px 22px;
      border-radius:14px;
      background:var(--accent);
      color:#000;
      font-weight:780;
      border:0;
      cursor:pointer;
      box-shadow:0 18px 60px rgba(0,0,0,.45);
      -webkit-tap-highlight-color: transparent;
    }
    .ctaBtn svg{width:18px; height:18px; stroke:#000}


    /* Collapsed process (details) */
    details.processDetails{
      margin: 18px auto 0;
      max-width: 820px;
      border-radius: 18px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.22);
      overflow:hidden;
    }
    details.processDetails[open]{background: rgba(0,0,0,.28);}
    details.processDetails summary{
      list-style:none;
      cursor:pointer;
      padding:16px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      font-weight:850;
      letter-spacing:.02em;
      -webkit-tap-highlight-color: transparent;
      user-select:none;
    }
    details.processDetails summary::-webkit-details-marker{display:none;}
    .summaryLeft{display:flex; align-items:center; gap:10px;}
    .summaryPill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:26px;
      height:26px;
      border-radius:999px;
      background:rgba(193,255,0,.18);
      border:1px solid rgba(193,255,0,.55);
      color:var(--accent);
      font-size:14px;
      line-height:1;
      flex:0 0 auto;
    }
    .chev{
      width:22px; height:22px;
      stroke:var(--accent);
      opacity:.9;
      transition:transform .18s ease;
      flex:0 0 auto;
    }
    details.processDetails[open] .chev{transform:rotate(180deg);}
    .processBody{padding:0 18px 16px;}

    /* Team */
    .artistGrid{
      margin:28px auto 0;
      max-width:var(--container);
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:22px;
    }
    .artistCard{
      border-radius:24px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      padding:22px;
      display:grid;
      grid-template-columns: 180px 1fr;
      gap:18px;
      box-shadow:0 22px 70px rgba(0,0,0,.45);
      overflow:hidden;
    }
    .artistImg{
      width:180px;
      height:180px;
      border-radius:18px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.10);
      background:#111;
    }
    .artistImg img{width:100%; height:100%; object-fit:cover; display:block}
    .artistName{margin:2px 0 2px; font-size:26px; font-weight:800; letter-spacing:-.01em}
    .artistRole{color:var(--accent); font-weight:800; letter-spacing:.04em; text-transform:uppercase; font-size:12px; margin:0 0 10px}
    .artistBio{color:var(--muted); line-height:1.8; margin:0}

    /* Process timeline */
    .timeline{
      margin:28px auto 0;
      max-width:780px;
      position:relative;
      padding-left:38px;
    }
    .timeline::before{
      content:"";
      position:absolute;
      left:18px;
      top:6px;
      bottom:6px;
      width:2px;
      background:rgba(255,255,255,.14);
    }
    .tlItem{position:relative; padding:12px 0 16px;}
    .tlDot{
      position:absolute;
      left:-38px;
      top:10px;
      width:36px;
      height:36px;
      border-radius:999px;
      background:rgba(193,255,0,.18);
      border:1px solid rgba(193,255,0,.55);
      display:grid;
      place-items:center;
      color:var(--accent);
      font-weight:850;
      font-size:12px;
      letter-spacing:.08em;
    }
    .tlTitle{margin:0; font-size:18px; font-weight:850; letter-spacing:-.01em;}
    .tlText{margin:6px 0 0; color:var(--muted); line-height:1.75;}

    /* Contact layout (previous-style) */
    .contactGrid{
      margin:28px auto 0;
      max-width:980px;
      display:grid;
      grid-template-columns: 1fr 1.2fr;
      gap:22px;
      align-items:start;
    }
    .card{
      border-radius:24px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      box-shadow:0 22px 70px rgba(0,0,0,.45);
      padding:22px;
    }
    .contactRow{display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:none;}
    .contactRow:last-child{border-bottom:0}
    .contactLabel{color:var(--muted); font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:750}
    .contactValue{font-weight:700; color:var(--text)}
    .contactValue a{color:var(--text); text-decoration:none}
    .contactValue a:hover{color:var(--accent)}

    .form{display:grid; gap:12px;}
    .field{display:grid; gap:8px;}
    .field label{color:var(--muted); font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:750}
    .input, .textarea{
      width:100%;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(0,0,0,.35);
      color:var(--text);
      padding:12px 14px;
      outline:none;
      font:inherit;
    }
    .textarea{min-height:140px; resize:vertical}
    .input:focus, .textarea:focus{border-color:rgba(193,255,0,.55); box-shadow:0 0 0 4px rgba(193,255,0,.12)}
    .formActions{display:flex; justify-content:flex-end; gap:12px; margin-top:6px;}
    .ghostBtn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:14px 18px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.06);
      color:var(--text);
      font-weight:750;
      cursor:pointer;
    }
    .ghostBtn:hover{border-color:rgba(193,255,0,.45); color:var(--accent)}

    /* Next slide arrow */
    .next{
      position:absolute;
      right:-22px;
      top:50%;
      transform:translateY(-50%);
      width:92px;
      height:92px;
      border-radius:22px;
      background:var(--accent);
      box-shadow:var(--shadow);
      display:grid;
      place-items:center;
      cursor:pointer;
      transition:transform .12s ease;
      user-select:none;
      border:0;
      z-index:7;
      -webkit-tap-highlight-color: transparent;
    }
    .next:hover{transform:translateY(-50%) scale(1.02)}
    .next:active{transform:translateY(-50%) scale(.99)}
    .next svg{width:40px; height:40px; stroke:#000; opacity:1}

    footer{
      width:var(--container);
      margin:0 auto;
      padding:14px 0 16px;
      color:var(--muted);
      font-size:12px;
      display:flex;
      gap:18px;
      align-items:center;
      justify-content:flex-start;
      flex:0 0 auto;
    }
    footer a{color:var(--muted); text-decoration:none}
    footer a:hover{color:var(--accent)}

    /* PROJECT MODAL */
    .modal{position:fixed; inset:0; z-index:100; display:none;}
    .modal[aria-hidden="false"]{display:block;}
    .modalBackdrop{position:absolute; inset:0; background:rgba(0,0,0,.78); backdrop-filter: blur(10px);}
    .modalContent{
      position:absolute;
      inset:48px;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(10,10,10,.55);
      box-shadow:var(--shadow);
      overflow:hidden;
      animation: panelIn .20s ease both;
    }
    .modalClose{
      position:absolute;
      top:14px;
      right:14px;
      width:44px;
      height:44px;
      border-radius:16px;
      background:var(--accent);
		border: 0px;
      color:black;
      font-size:22px;
      font-weight:700;
      cursor:pointer;
      z-index:6;
    }
    .modalClose:hover{font-size: 28px;}

    .modalInner{height:100%; display:flex; min-height:0;}

    .gallery{position:relative; min-height:0; display:flex; flex-direction:column; background:#050505; width:100%;}
    .galleryMain{position:relative; flex:1; min-height:0; overflow:hidden;}
    .galleryMain img{width:100%; height:100%; object-fit:cover; display:block;}
    .galleryNav{position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 10px; pointer-events:none; z-index:5;}
    .gBtn{pointer-events:auto; width:54px; height:54px; border-radius:18px; border:0;  background:var(--accent); color:black; cursor:pointer; display:grid; place-items:center; font-size:28px; line-height:1; backdrop-filter: blur(8px);}
    .gBtn:hover{font-size: 36px; color: black;}

    .thumbs{
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      z-index:4;
      display:flex;
      gap:12px;
      padding:14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
      overflow:auto;
      scrollbar-width:none;
      -webkit-overflow-scrolling:touch;
      background:#000000bd;
		justify-content: center;
    }
    .thumbs::-webkit-scrollbar{display:none}
    .thumb{
      flex:0 0 168px;
      height:112px;
      border-radius:16px;
      overflow:hidden;
      border:5px solid rgba(255,255,255,.14);
      background:#111;
      cursor:pointer;
      opacity:.78;
      transform: translateY(6px);
      transition: opacity .15s ease, transform .15s ease, border-color .2s ease;
    }
    .thumb:hover{opacity:1; transform: translateY(2px)}
    .thumb[aria-current="true"]{border-color:rgba(193,255,0,.65); opacity:1; transform: translateY(0px)}
    .thumb img{width:100%; height:100%; object-fit:cover; display:block}

    /* Animations */
            @keyframes drift{0%{background-position:50% 50%; filter:saturate(1.05)} 100%{background-position:58% 44%; filter:saturate(1.15)}}
    @keyframes contentIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}
    @keyframes fadeUp{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}
    @keyframes panelIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}

    /* Responsive */
    @media (max-width: 900px){
      :root{--container:min(1200px, calc(100vw - 28px));}
      .menu{display:none}
      .content{left:22px; right:22px;bottom: 20px; padding: 20px;}
      .title{font-size:44px}
      .next{right:-16px; width:70px !important; height:70px !important;}
		.next svg{width: 40px !important; height: 40px !important;}
      .modalContent{inset:28px}
      .sectionTitle{font-size:52px}
      .includedGrid{grid-template-columns:1fr}
      .artistGrid{grid-template-columns:1fr}
      .artistCard{grid-template-columns:140px 1fr}
      .artistImg{width:140px; height:140px}
      .contactGrid{grid-template-columns:1fr}
    }
    @media (max-width: 520px){
      .content{left:18px; right:18px; bottom:20px; padding: 10px; gap:0;}
      .title{font-size:32px;}
		.body{margin-top: 8px; display: none;}
      .sub{font-size:16px; margin-top: 8px;}
		.playBtn-wrapper{width:100%;}
      .frame{inset:14px}
      footer{width:calc(100vw - 28px)}
      .counter{top:25px; right:28px}

      .page{padding:22px 16px 44px}
      .sectionTitle{font-size:40px}
      .sectionLead{font-size:15px}
	  .site-card{
			padding: 15px 10px !important;
		}

      .modalContent{inset:14px}
      .thumb{flex-basis:132px; height:88px}

      .priceValue{font-size:58px;}
      .artistCard{grid-template-columns:1fr;}
      .artistImg{width:100%; height:220px}
      .timeline{padding-left:34px}
      .tlDot{left:-34px; width:32px; height:32px}
    }

/* NAVBAR – blurred color aura animation (yellow / cyan / purple) */
.nav{overflow:hidden;}
.nav__inner{position:relative; z-index:2;}
.nav::after{
  content:"";
  position:absolute;
  opacity:.95;
  transform: translate3d(-6%,-4%,0) scale(1.08);
  pointer-events:none;
  z-index:1;
  mix-blend-mode: screen;
}

.navLink[aria-current="true"]{
  background: var(--accent);
  color:#0b0b0b;
}


/* --- NAV MENU OVERRIDES (NO UNDERLINE + ACTIVE BG) --- */
.navLink::after{
  display:none !important;
}
.navLink:hover::after,
.navLink[aria-current="true"]::after{
  display:none !important;
}

/* make menu items feel like buttons (optional but helps active bg read well) */
.navLink{
  padding:10px 14px;
  border-radius:999px;
}

/* active state = full accent background + dark text */
.navLink[aria-current="true"]{
  background: var(--accent) !important;
  color:#0b0b0b !important;
  opacity:1 !important;
}


/* --- NAV MENU HOVER BORDER (NON-ACTIVE ITEMS) --- */
.navLink:not([aria-current="true"]):hover{
  border:1.5px solid var(--accent);
  color:var(--accent);
}


/* --- NAV MENU TWEAKS: SMALLER TEXT + SMOOTHER HOVER --- */
.menu{
  font-size:16px; /* smaller, calmer */
}

/* prevent layout shift + smooth transitions */
.navLink{
  border:1.5px solid transparent;
  transition: all .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}

.navLink:not([aria-current="true"]):hover{
  border-color: var(--accent);
}

/* === FORCE FULL-BLEED LANDING (override WP/_s padding) === */
body,
.site,
.site-content,
.site-main,
main {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

/* slider wrapper must be full viewport */
.rail,
.slides,
.slide {
  width: 100vw;
  max-width: 100vw;
  margin: 0;
}

/* PERFORMANCE HINTS */
.slide {
  will-change: transform;
}

.bg {
  will-change: opacity, transform;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Open-Sans-Regular.eot'); /* IE9 */
  src: url('assets/fonts/Open-Sans-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('assets/fonts/Open-Sans-Regular.woff2') format('woff2'), /* Modern Browsers */
    url('assets/fonts/Open-Sans-Regular.woff') format('woff'), /* Modern Browsers */
    url('assets/fonts/Open-Sans-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('assets/fonts/Open-Sans-Regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/Open-Sans-300.eot'); /* IE9 */
  src: url('assets/fonts/Open-Sans-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('assets/fonts/Open-Sans-300.woff2') format('woff2'), /* Modern Browsers */
    url('assets/fonts/Open-Sans-300.woff') format('woff'), /* Modern Browsers */
    url('assets/fonts/Open-Sans-300.ttf') format('truetype'), /* Safari, Android, iOS */
    url('assets/fonts/Open-Sans-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Open-Sans-500.eot'); /* IE9 */
  src: url('assets/fonts/Open-Sans-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('assets/fonts/Open-Sans-500.woff2') format('woff2'), /* Modern Browsers */
    url('assets/fonts/Open-Sans-500.woff') format('woff'), /* Modern Browsers */
    url('assets/fonts/Open-Sans-500.ttf') format('truetype'), /* Safari, Android, iOS */
    url('assets/fonts/Open-Sans-500.svg#OpenSans') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/Open-Sans-700.eot'); /* IE9 */
  src: url('assets/fonts/Open-Sans-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('assets/fonts/Open-Sans-700.woff2') format('woff2'), /* Modern Browsers */
    url('assets/fonts/Open-Sans-700.woff') format('woff'), /* Modern Browsers */
    url('assets/fonts/Open-Sans-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('assets/fonts/Open-Sans-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Open-Sans-600.eot'); /* IE9 */
  src: url('assets/fonts/Open-Sans-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('assets/fonts/Open-Sans-600.woff2') format('woff2'), /* Modern Browsers */
    url('assets/fonts/Open-Sans-600.woff') format('woff'), /* Modern Browsers */
    url('assets/fonts/Open-Sans-600.ttf') format('truetype'), /* Safari, Android, iOS */
    url('assets/fonts/Open-Sans-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/Open-Sans-800.eot'); /* IE9 */
  src: url('assets/fonts/Open-Sans-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('assets/fonts/Open-Sans-800.woff2') format('woff2'), /* Modern Browsers */
    url('assets/fonts/Open-Sans-800.woff') format('woff'), /* Modern Browsers */
    url('assets/fonts/Open-Sans-800.ttf') format('truetype'), /* Safari, Android, iOS */
    url('assets/fonts/Open-Sans-800.svg#OpenSans') format('svg'); /* Legacy iOS */
}


/* ===============================
   Animated Background – Global Slides ONLY
================================ */

.has-animated-bg {
  position: relative;
  overflow: hidden;
}

.has-animated-bg .animated-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.has-animated-bg .bg-gradient {
  position: absolute;
  inset: -50%;
  filter: blur(140px);
  background:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,0.9), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(70, 70, 70, 0.75), transparent 15%),
    radial-gradient(circle at 60% 80%, rgba(70, 70, 70, 0.9), transparent 50%),
    radial-gradient(circle at 30% 70%, rgba(119, 119, 119, 0.7), transparent 45%);
  animation-play-state: running;
  background-size: 240% 240%; /* nur EINMAL */
  animation: gradientFlow 48s cubic-bezier(0.45, 0.05, 0.15, 0.95) infinite;
}

/* 🔥 ONLY when active */
.has-animated-bg.bg-active .bg-gradient {
  animation-play-state: paused;
}

@keyframes gradientFlow {
  0% {
    background-position: 0% 0%, 100% 0%, 50% 100%, 0% 100%;
  }
  50% {
    background-position: 100% 50%, 0% 100%, 50% 0%, 100% 50%;
  }
  100% {
    background-position: 0% 0%, 100% 0%, 50% 100%, 0% 100%;
  }
}

/* Content stays above 
.has-animated-bg .page {
  position: relative;
  z-index: 2;
}*/

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .has-animated-bg .bg-gradient {
    animation: none;
  }
}

.bg-gradient {
  opacity: 0;
  transition: opacity .6s ease;
}
.bg-active .bg-gradient {
  opacity: 1;
}

.animated-bg,
.bg-gradient,
.grain {
  pointer-events: none;
}