/* ============================================================
   LIL' ITH — Futuristic Garden of Eden
   Dark blues / deep blacks × fluorescent greens / neon pinks
   Fonts: Futurion (title) · Montserrat (body)
   ============================================================ */

/* ── Custom properties ── */
:root {
   --ith-black:      #030508;
   --ith-deep-blue:  #060d18;
   --ith-navy:       #0a1628;
   --ith-panel:      #0d1f35;
   --ith-border:     rgba(0, 255, 160, 0.12);
   --ith-green:      #00ffa0;
   --ith-green-dim:  #00cc7a;
   --ith-pink:       #ff2d78;
   --ith-pink-dim:   #cc1f5c;
   --ith-gold:       #9aa000;         /* Futurion title colour */
   --ith-gold-lite:  #c8d000;
   --ith-text:       #9eb8c8;
   --ith-text-dim:   rgba(158, 184, 200, 0.55);
   --ith-glow-green: 0 0 10px #00ffa0, 0 0 30px rgba(0,255,160,0.4), 0 0 60px rgba(0,255,160,0.15);
   --ith-glow-pink:  0 0 10px #ff2d78, 0 0 30px rgba(255,45,120,0.4), 0 0 60px rgba(255,45,120,0.15);
   --ith-glow-gold:  0 0 8px #9aa000,  0 0 24px rgba(154,160,0,0.5);
}

/* ── Futurion font-face ── */
@font-face {
   font-family: 'Futurion';
   src: url('../font/futurion-futuristic-sci-fi-typeface/FUTURION REGULAR/Futurion.woff') format('woff'),
        url('../font/futurion-futuristic-sci-fi-typeface/FUTURION REGULAR/Futurion.ttf')  format('truetype'),
        url('../font/futurion-futuristic-sci-fi-typeface/FUTURION REGULAR/Futurion.otf')  format('opentype');
   font-weight: normal;
   font-style:  normal;
   font-display: swap;
}

/* ── Global reset additions ── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
   background: var(--ith-black);
   font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
   color: var(--ith-text);
   font-size: 15px;
   line-height: 1.8;
   letter-spacing: 0.03em;
   -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ── */
::-webkit-scrollbar              { width: 6px; }
::-webkit-scrollbar-track        { background: var(--ith-deep-blue); }
::-webkit-scrollbar-thumb        { background: var(--ith-green-dim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: var(--ith-green); }

/* ── Selection ── */
::selection { background: var(--ith-green); color: var(--ith-black); }

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
   font-family: 'Montserrat', sans-serif;
   font-weight: 700;
   color: var(--ith-green);
   letter-spacing: 0.08em;
}

a { color: var(--ith-text); text-decoration: none; transition: all 0.3s ease; }
a:hover { color: var(--ith-green); }

/* ── Loader ── */
.loader {
   background: var(--ith-black) !important;
   z-index: 10000;
}
.loader .spinner {
   stroke: var(--ith-green) !important;
   fill: var(--ith-black) !important;
}

/* ──────────────────────────────────────────────
   INTRO OVERLAY — "Enter the Garden?"
────────────────────────────────────────────── */
#ith-intro-overlay {
   position: fixed;
   inset: 0;
   background: radial-gradient(ellipse at center, #061020 0%, #030508 100%);
   z-index: 10001;
   display: none;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   overflow: hidden;
}
#ith-intro-overlay.active { display: flex; }

/* Animated background fog */
#ith-intro-overlay::before {
   content: '';
   position: absolute;
   inset: -20%;
   background:
      radial-gradient(ellipse 60% 40% at 30% 60%, rgba(0,255,160,0.07) 0%, transparent 70%),
      radial-gradient(ellipse 50% 35% at 75% 35%, rgba(255,45,120,0.06) 0%, transparent 70%);
   animation: fogDrift 12s ease-in-out infinite alternate;
   pointer-events: none;
}
@keyframes fogDrift {
   0%   { transform: translateX(-3%) translateY(-2%) scale(1); }
   100% { transform: translateX(3%)  translateY(2%)  scale(1.04); }
}

.intro-title {
   font-family: 'Futurion', 'Montserrat', sans-serif;
   font-size: clamp(3rem, 10vw, 7rem);
   color: var(--ith-gold);
   text-shadow: var(--ith-glow-gold);
   letter-spacing: 0.06em;
   text-align: center;
   position: relative;
   z-index: 2;
   animation: titlePulse 4s ease-in-out infinite;
}
@keyframes titlePulse {
   0%, 100% { text-shadow: var(--ith-glow-gold); }
   50%       { text-shadow: 0 0 14px #9aa000, 0 0 40px rgba(154,160,0,0.7), 0 0 80px rgba(154,160,0,0.3); }
}

.intro-sub {
   font-size: clamp(0.7rem, 2vw, 0.9rem);
   letter-spacing: 0.3em;
   text-transform: uppercase;
   color: var(--ith-green);
   margin: 1rem 0 3rem;
   text-shadow: var(--ith-glow-green);
   position: relative;
   z-index: 2;
}

.intro-btns {
   display: flex;
   gap: 1.5rem;
   position: relative;
   z-index: 2;
}
.intro-btn {
   padding: 0.85rem 2.8rem;
   font-family: 'Montserrat', sans-serif;
   font-size: 0.78rem;
   font-weight: 600;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   background: transparent;
   cursor: pointer;
   transition: all 0.35s ease;
   border-radius: 1px;
}
.intro-btn.yes {
   border: 2px solid var(--ith-green);
   color: var(--ith-green);
   box-shadow: 0 0 12px rgba(0,255,160,0.25), inset 0 0 12px rgba(0,255,160,0.05);
}
.intro-btn.yes:hover {
   background: var(--ith-green);
   color: var(--ith-black);
   box-shadow: var(--ith-glow-green);
}
.intro-btn.no {
   border: 2px solid rgba(158,184,200,0.3);
   color: var(--ith-text-dim);
}
.intro-btn.no:hover {
   border-color: var(--ith-pink);
   color: var(--ith-pink);
   box-shadow: 0 0 12px rgba(255,45,120,0.25);
}

/* ── Intro plant decorations ── */
.intro-plant {
   position: absolute;
   bottom: 0;
   width: 220px;
   height: 280px;
   overflow: hidden;
   pointer-events: none;
   z-index: 1;
}
.intro-plant.left  { left: 0; transform: scaleX(1); }
.intro-plant.right { right: 0; transform: scaleX(-1); }
.intro-plant svg {
   width: 100%;
   height: 100%;
   animation: plantSway 6s ease-in-out infinite;
   transform-origin: bottom center;
}
.intro-plant.right svg { animation-delay: -2s; }
@keyframes plantSway {
   0%, 100% { transform: rotate(-2deg); }
   50%       { transform: rotate(2deg); }
}

/* ──────────────────────────────────────────────
   MAIN WRAPPER
────────────────────────────────────────────── */
.ith-theme { background: var(--ith-black); }
#main-content { display: none; }

/* ──────────────────────────────────────────────
   NAVIGATION
────────────────────────────────────────────── */
.header.default {
   background: transparent !important;
   border-bottom: none;
   padding: 1.25rem 2rem;
}
.header.switched-header {
   background: rgba(3, 5, 8, 0.92) !important;
   backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--ith-border) !important;
   padding: 0.9rem 2rem;
}
.header.default .logo h2,
.header.switched-header .logo h2 {
   font-family: 'Futurion', 'Montserrat', sans-serif !important;
   font-size: clamp(1rem, 2.5vw, 1.4rem) !important;
   color: var(--ith-gold) !important;
   text-shadow: var(--ith-glow-gold) !important;
   letter-spacing: 0.08em;
   transition: text-shadow 0.3s;
}
.header.default .logo h2:hover,
.header.switched-header .logo h2:hover {
   text-shadow: 0 0 14px #9aa000, 0 0 40px rgba(154,160,0,0.7) !important;
}
.header.default .main-menu li a,
.header.switched-header .main-menu li a {
   font-size: 0.72rem !important;
   letter-spacing: 0.15em !important;
   text-transform: uppercase !important;
   color: var(--ith-text) !important;
   font-weight: 500;
   transition: all 0.3s ease;
}
.header.default .main-menu li a:hover,
.header.switched-header .main-menu li a:hover {
   color: var(--ith-green) !important;
   text-shadow: 0 0 8px rgba(0,255,160,0.6) !important;
}
/* hamburger lines */
.mobile-but .lines,
.mobile-but .lines:before,
.mobile-but .lines:after { background: var(--ith-green) !important; }

/* ──────────────────────────────────────────────
   HERO
────────────────────────────────────────────── */
.hero .hero-slide {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 6rem 1rem 4rem;
   position: relative;
   overflow: hidden;
}
.hero .background-img {
   position: absolute;
   inset: 0;
   z-index: 0;
}
.hero .background-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   filter: brightness(0.45) saturate(1.2);
   margin: 0;
}
/* Dark gradient overlay */
.hero .hero-slide::before {
   content: '';
   position: absolute;
   inset: 0;
   background:
      linear-gradient(to bottom, rgba(3,5,8,0.3) 0%, transparent 40%, rgba(3,5,8,0.7) 100%),
      radial-gradient(ellipse 70% 60% at 50% 80%, rgba(0,255,160,0.06) 0%, transparent 70%);
   z-index: 1;
   pointer-events: none;
}
.hero-content { position: relative; z-index: 10; text-align: center; }

.hero-title-ith {
   font-family: 'Futurion', 'Montserrat', sans-serif;
   font-size: clamp(3.5rem, 12vw, 10rem);
   color: var(--ith-gold);
   text-shadow: var(--ith-glow-gold);
   line-height: 1;
   letter-spacing: 0.04em;
   animation: heroTitlePulse 5s ease-in-out infinite;
}
@keyframes heroTitlePulse {
   0%, 100% { text-shadow: var(--ith-glow-gold); }
   50%       { text-shadow: 0 0 16px #9aa000, 0 0 50px rgba(154,160,0,0.65), 0 0 100px rgba(154,160,0,0.25); }
}
.hero-album-sub {
   font-size: clamp(0.75rem, 2.5vw, 1rem);
   letter-spacing: 0.35em;
   text-transform: uppercase;
   color: var(--ith-green);
   text-shadow: var(--ith-glow-green);
   margin-top: 0.75rem;
   animation: subPulse 4s ease-in-out infinite;
}
@keyframes subPulse {
   0%, 100% { opacity: 0.85; text-shadow: var(--ith-glow-green); }
   50%       { opacity: 1;    text-shadow: 0 0 14px #00ffa0, 0 0 40px rgba(0,255,160,0.6); }
}
.hero-scroll-cta {
   margin-top: 3rem;
   display: inline-block;
   font-size: 0.68rem;
   letter-spacing: 0.25em;
   text-transform: uppercase;
   color: var(--ith-text-dim);
   border: 1px solid rgba(0,255,160,0.2);
   padding: 0.55rem 1.6rem;
   border-radius: 1px;
   transition: all 0.35s;
}
.hero-scroll-cta:hover {
   color: var(--ith-green);
   border-color: var(--ith-green);
   box-shadow: var(--ith-glow-green);
   text-shadow: 0 0 8px rgba(0,255,160,0.5);
}

/* ── Hero corner plants ── */
.hero-plant {
   position: absolute;
   bottom: 0;
   width: clamp(160px, 22vw, 340px);
   height: clamp(220px, 35vh, 500px);
   pointer-events: none;
   z-index: 5;
   overflow: visible;
}
.hero-plant.bottom-left  { left: 0; }
.hero-plant.bottom-right { right: 0; transform: scaleX(-1); }
.hero-plant svg { width: 100%; height: 100%; }

/* ──────────────────────────────────────────────
   SECTION COMMON
────────────────────────────────────────────── */
.section-title {
   font-family: 'Montserrat', sans-serif !important;
   font-weight: 700 !important;
   color: var(--ith-green) !important;
   letter-spacing: 0.1em !important;
   text-shadow: 0 0 18px rgba(0,255,160,0.35) !important;
}
.text-accent { color: var(--ith-green-dim) !important; }
.section-eyebrow {
   font-size: 0.65rem;
   letter-spacing: 0.3em;
   text-transform: uppercase;
   color: var(--ith-pink);
   text-shadow: 0 0 8px rgba(255,45,120,0.45);
   display: block;
   margin-bottom: 0.5rem;
}

/* ──────────────────────────────────────────────
   BUTTONS
────────────────────────────────────────────── */
.btn-primary,
.stream-btn {
   background: transparent !important;
   border: 2px solid var(--ith-green) !important;
   color: var(--ith-green) !important;
   box-shadow: 0 0 10px rgba(0,255,160,0.2) !important;
   font-family: 'Montserrat', sans-serif !important;
   font-size: 0.72rem !important;
   font-weight: 600 !important;
   letter-spacing: 0.15em !important;
   text-transform: uppercase;
   transition: all 0.35s ease !important;
   border-radius: 1px !important;
}
.btn-primary:hover,
.stream-btn:hover {
   background: var(--ith-green) !important;
   color: var(--ith-black) !important;
   box-shadow: var(--ith-glow-green) !important;
}

/* ──────────────────────────────────────────────
   DISCOGRAPHY
────────────────────────────────────────────── */
.discography { background: var(--ith-deep-blue) !important; }

.block-album.block-album-card {
   background: var(--ith-panel);
   border: 1px solid var(--ith-border);
   border-radius: 2px;
   overflow: hidden;
   transition: all 0.4s ease;
   position: relative;
}
.block-album.block-album-card::after {
   content: '';
   position: absolute;
   inset: 0;
   border: 2px solid transparent;
   border-radius: 2px;
   transition: border-color 0.4s, box-shadow 0.4s;
   pointer-events: none;
}
.block-album.block-album-card:hover {
   transform: translateY(-6px);
   background: rgba(0,255,160,0.04);
}
.block-album.block-album-card:hover::after {
   border-color: var(--ith-green);
   box-shadow: var(--ith-glow-green);
}
.block-album img {
   border: none !important;
   box-shadow: none !important;
   transition: filter 0.4s ease, transform 0.4s ease;
   width: 100%;
   margin: 0;
}
.block-album:hover img {
   filter: brightness(1.1) saturate(1.3);
   transform: scale(1.03);
}

/* "Forbidden Fruit" featured album — glows harder */
.block-album.featured-fruit {
   border-color: rgba(0,255,160,0.35) !important;
   box-shadow: 0 0 20px rgba(0,255,160,0.15);
}
.block-album.featured-fruit img {
   filter: brightness(1.05) saturate(1.4);
}
.block-album.featured-fruit:hover {
   box-shadow: var(--ith-glow-green);
}

.album-meta {
   padding: 0.75rem 1rem 1rem;
   font-size: 0.72rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--ith-text-dim);
}
.block-album h5,
.block-album .link {
   color: var(--ith-green) !important;
   font-family: 'Montserrat', sans-serif;
   font-weight: 600;
   font-size: 0.85rem;
   letter-spacing: 0.1em;
}
.album-link { display: block; overflow: hidden; }

/* ──────────────────────────────────────────────
   BLOG / NEWS
────────────────────────────────────────────── */
.news.main { background: var(--ith-navy) !important; }
.news .section-title { color: var(--ith-green) !important; }
.news h2 { color: var(--ith-green) !important; }
.news span,
.news p  { color: var(--ith-text) !important; }
.news a  { color: var(--ith-green-dim) !important; }
.news a:hover { color: var(--ith-green) !important; text-shadow: 0 0 8px rgba(0,255,160,0.5) !important; }
.news-list li { border-bottom: 1px solid var(--ith-border); padding-bottom: 3rem; }
.news-list li:last-child { border-bottom: none; }

/* ──────────────────────────────────────────────
   CONTACT / SOCIAL
────────────────────────────────────────────── */
.contact.main { background: var(--ith-deep-blue) !important; }
.contact .section-title { color: var(--ith-green) !important; }

.block-social li a {
   color: var(--ith-text) !important;
   border: 1px solid rgba(0,255,160,0.15) !important;
   padding: 0.4rem 0.75rem !important;
   font-size: 0.78rem !important;
   letter-spacing: 0.08em;
   transition: all 0.3s ease !important;
   border-radius: 1px;
   display: inline-block;
   margin: 0.2rem;
}
.block-social li a:hover {
   color: var(--ith-green) !important;
   border-color: var(--ith-green) !important;
   box-shadow: var(--ith-glow-green) !important;
   text-shadow: 0 0 8px rgba(0,255,160,0.5);
}
/* Streaming platform — special pink accent */
.block-social li a.stream-apple:hover,
.block-social li a.stream-spotify:hover {
   color: var(--ith-pink) !important;
   border-color: var(--ith-pink) !important;
   box-shadow: var(--ith-glow-pink) !important;
}

/* ──────────────────────────────────────────────
   FOOTER
────────────────────────────────────────────── */
.footer {
   background: var(--ith-black) !important;
   border-top: 1px solid var(--ith-border) !important;
}
.footer small,
.footer a     { color: var(--ith-text-dim) !important; font-size: 0.7rem; letter-spacing: 0.06em; }
.footer a:hover { color: var(--ith-green) !important; }

/* Back-to-top */
.block-top {
   background: var(--ith-navy) !important;
   border: 1px solid var(--ith-border) !important;
   color: var(--ith-green) !important;
}
.block-top:hover {
   background: var(--ith-green) !important;
   color: var(--ith-black) !important;
   box-shadow: var(--ith-glow-green) !important;
}

/* ──────────────────────────────────────────────
   ANIMATED GROWING PLANTS — SVG inline / CSS
────────────────────────────────────────────── */

/* Stem grow animation */
@keyframes stemGrow {
   0%   { stroke-dashoffset: 400; opacity: 0; }
   30%  { opacity: 1; }
   100% { stroke-dashoffset: 0; opacity: 1; }
}
/* Leaf unfurl */
@keyframes leafUnfurl {
   0%   { transform: scale(0.1) rotate(-40deg); opacity: 0; transform-origin: bottom left; }
   60%  { opacity: 1; }
   100% { transform: scale(1) rotate(0deg);    opacity: 1; transform-origin: bottom left; }
}
/* Continuous sway */
@keyframes leafSway {
   0%, 100% { transform: rotate(-3deg); }
   50%       { transform: rotate(3deg); }
}
@keyframes leafSwayAlt {
   0%, 100% { transform: rotate(2deg); }
   50%       { transform: rotate(-4deg); }
}
/* Green glow pulse on stems */
@keyframes glowPulse {
   0%, 100% { filter: drop-shadow(0 0 4px var(--ith-green)) drop-shadow(0 0 10px rgba(0,255,160,0.3)); }
   50%       { filter: drop-shadow(0 0 8px var(--ith-green)) drop-shadow(0 0 20px rgba(0,255,160,0.5)) drop-shadow(0 0 40px rgba(0,255,160,0.2)); }
}

/* Vines that grow up the sides */
.side-plant {
   position: fixed;
   bottom: 0;
   width: 90px;
   z-index: 5;
   pointer-events: none;
}
.side-plant.sp-left  { left: 0; }
.side-plant.sp-right { right: 0; transform: scaleX(-1); }
.side-plant svg { display: block; width: 100%; }
.side-plant .stem-path {
   stroke-dasharray: 400;
   stroke-dashoffset: 400;
   animation: stemGrow 3s cubic-bezier(0.22,1,0.36,1) forwards, glowPulse 4s ease-in-out 3s infinite;
}
.side-plant .leaf-shape { animation: leafUnfurl 0.8s cubic-bezier(0.22,1,0.36,1) forwards; opacity: 0; }
.side-plant .leaf-sway  { animation: leafSway 5s ease-in-out infinite; transform-origin: bottom center; }
.side-plant .leaf-sway-alt { animation: leafSwayAlt 6s ease-in-out infinite; transform-origin: bottom center; }

/* ── Forbidden Fruit glow pulse ── */
.forbidden-fruit-glow {
   animation: fruitGlow 3s ease-in-out infinite;
   border-radius: 50%;
   display: inline-block;
}
@keyframes fruitGlow {
   0%, 100% {
      filter: drop-shadow(0 0 8px rgba(0,255,160,0.6))
              drop-shadow(0 0 20px rgba(255,45,120,0.3));
   }
   50% {
      filter: drop-shadow(0 0 20px rgba(0,255,160,0.9))
              drop-shadow(0 0 50px rgba(255,45,120,0.5))
              drop-shadow(0 0 80px rgba(0,255,160,0.3));
   }
}

/* ── Floating particle spores ── */
.spore-canvas {
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 2;
   overflow: hidden;
}
.spore {
   position: absolute;
   border-radius: 50%;
   animation: sporeFloat linear infinite;
   opacity: 0;
}
@keyframes sporeFloat {
   0%   { transform: translateY(0)     scale(0);   opacity: 0; }
   10%  { opacity: 0.7; transform: translateY(-8vh)  scale(1); }
   90%  { opacity: 0.3; }
   100% { transform: translateY(-80vh) scale(0.4); opacity: 0; }
}

/* ──────────────────────────────────────────────
   HOVER GLOW EFFECTS — general
────────────────────────────────────────────── */
/* Nav links glow */
.main-menu li a,
.nav-links li a {
   position: relative;
}
.main-menu li a::after,
.nav-links li a::after {
   content: '';
   position: absolute;
   left: 0; bottom: -2px;
   width: 0; height: 1px;
   background: var(--ith-green);
   box-shadow: 0 0 6px var(--ith-green);
   transition: width 0.3s ease;
}
.main-menu li a:hover::after,
.nav-links li a:hover::after { width: 100%; }

/* Image card glow */
.img-fluid:hover {
   filter: brightness(1.08) saturate(1.2);
   transition: filter 0.3s ease;
}

/* Generic link glow */
a:not(.btn):not(.cta-btn):not(.intro-btn):not(.block-top) {
   transition: color 0.3s, text-shadow 0.3s;
}
a:not(.btn):not(.cta-btn):not(.intro-btn):not(.block-top):hover {
   color: var(--ith-green);
   text-shadow: 0 0 8px rgba(0,255,160,0.45);
}

/* ──────────────────────────────────────────────
   SECTION DIVIDERS — decorative neon rule
────────────────────────────────────────────── */
.neon-rule {
   border: none;
   height: 1px;
   background: linear-gradient(to right, transparent, var(--ith-green), transparent);
   box-shadow: 0 0 8px rgba(0,255,160,0.4);
   margin: 0;
}
.bg-secondary { border-top: 1px solid rgba(0,255,160,0.1) !important; }

/* ──────────────────────────────────────────────
   RESPONSIVE
────────────────────────────────────────────── */
@media (max-width: 768px) {
   .side-plant { width: 55px; }
   .hero-title-ith { font-size: clamp(2.5rem, 15vw, 6rem); }
   .hero-plant { width: clamp(100px, 25vw, 200px); }
   .intro-btns { flex-direction: column; gap: 1rem; }
   .intro-btn  { width: 200px; text-align: center; }
}
@media (max-width: 480px) {
   .side-plant { display: none; }
}