/*
Theme Name: FeNomenal — Bricks Child
Theme URI: https://fenomenalcommunication.it
Description: Child theme for Bricks Builder — FeNomenal PR & Communication. Smooth scroll, custom cursor, parallax, scroll-triggered animations, brand palette and typography.
Author: KYRiAN Lab
Author URI: https://kyrianlab.com
Template: bricks
Version: 1.0.0
Text Domain: fenomenal
*/

/* ============================================
   FENOMENAL — DESIGN TOKENS
   ============================================ */
:root{
  /* Colors */
  --fn-sage:#91A499;
  --fn-sage-deep:#6B7E73;
  --fn-sage-light:#C8D2CB;
  --fn-off-white:#F4F1EC;
  --fn-cream:#EDE6D6;
  --fn-sand:#D4C9B8;
  --fn-black:#1A1A1A;

  /* Easing */
  --fn-ease:cubic-bezier(.65,0,.35,1);
  --fn-ease-out-quart:cubic-bezier(.165,.84,.44,1);

  /* Spacing scale (8px base) */
  --fn-s1:8px; --fn-s2:16px; --fn-s3:24px; --fn-s4:32px;
  --fn-s5:48px; --fn-s6:64px; --fn-s7:96px; --fn-s8:128px;
}

html, body{
  background:var(--fn-off-white);
  color:var(--fn-black);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body{
  font-family:'Inter', sans-serif;
}

h1,h2,h3,h4,h5,h6{
  font-family:'Poppins', sans-serif;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:.95;
}

/* ============================================
   LENIS SMOOTH SCROLL
   ============================================ */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:clip; }

/* ============================================
   CUSTOM CURSOR
   ============================================ */
.fn-cursor{
  position:fixed; top:0; left:0;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--fn-black);
  pointer-events:none;
  z-index:9999;
  mix-blend-mode:difference;
  transition:width .3s var(--fn-ease), height .3s var(--fn-ease), background .3s;
  transform:translate(-50%,-50%);
  will-change:transform;
}
.fn-cursor.is-hover{ width:60px; height:60px; background:var(--fn-sage); }
@media (hover:none){ .fn-cursor{ display:none; } }

/* ============================================
   SCROLL REVEALS
   ============================================ */
.fn-reveal{
  opacity:0;
  transform:translateY(60px);
  transition:opacity 1s var(--fn-ease), transform 1s var(--fn-ease);
  will-change:opacity, transform;
}
.fn-reveal.is-visible{ opacity:1; transform:translateY(0); }

.fn-reveal-stagger > *{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s var(--fn-ease), transform .8s var(--fn-ease);
}
.fn-reveal-stagger.is-visible > *{ opacity:1; transform:translateY(0); }
.fn-reveal-stagger.is-visible > *:nth-child(1){ transition-delay:0s; }
.fn-reveal-stagger.is-visible > *:nth-child(2){ transition-delay:.1s; }
.fn-reveal-stagger.is-visible > *:nth-child(3){ transition-delay:.2s; }
.fn-reveal-stagger.is-visible > *:nth-child(4){ transition-delay:.3s; }
.fn-reveal-stagger.is-visible > *:nth-child(5){ transition-delay:.4s; }
.fn-reveal-stagger.is-visible > *:nth-child(6){ transition-delay:.5s; }

/* ============================================
   MARQUEE
   ============================================ */
.fn-marquee{
  overflow:hidden;
  background:var(--fn-black);
  color:var(--fn-off-white);
  padding:32px 0;
}
.fn-marquee__track{
  display:flex; gap:80px;
  animation:fn-marquee 40s linear infinite;
  white-space:nowrap;
  will-change:transform;
}
.fn-marquee__item{
  font-family:'Poppins', sans-serif;
  font-size:clamp(32px, 4.5vw, 72px);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.02em;
  display:flex; align-items:center; gap:80px;
}
.fn-marquee__item::after{
  content:'✦';
  color:var(--fn-sage);
  font-size:.7em;
}
@keyframes fn-marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ============================================
   PARALLAX
   ============================================ */
[data-fn-parallax]{ will-change:transform; }

/* ============================================
   CASE CARDS HOVER
   ============================================ */
.fn-case{
  position:relative;
  overflow:hidden;
  border-radius:8px;
  cursor:pointer;
}
.fn-case__bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  transition:transform .8s var(--fn-ease);
  will-change:transform;
}
.fn-case:hover .fn-case__bg{ transform:scale(1.05); }
.fn-case__overlay{
  position:absolute; inset:0;
  background:rgba(26,26,26,.4);
  opacity:0;
  transition:opacity .5s var(--fn-ease);
}
.fn-case:hover .fn-case__overlay{ opacity:1; }

/* ============================================
   SECTOR ROWS
   ============================================ */
.fn-sector-row{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:padding-left .4s var(--fn-ease);
}
.fn-sector-row::before{
  content:'';
  position:absolute; left:0; top:0;
  width:0; height:100%;
  background:var(--fn-sage);
  transition:width .5s var(--fn-ease);
  z-index:0;
}
.fn-sector-row:hover{ padding-left:40px; }
.fn-sector-row:hover::before{ width:100%; }
.fn-sector-row > *{ position:relative; z-index:1; transition:color .3s; }
.fn-sector-row:hover > *{ color:var(--fn-black) !important; }

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .fn-marquee__track{ animation:none; }
}


/* ============================================
   BRICKS FULL-WIDTH OVERRIDE
   ============================================ */
html, body { margin:0 !important; padding:0 !important; overflow-x:hidden; }
body { background:var(--fn-off-white); }

#brx-content,
#brx-content > .brxe-section,
.brxe-section,
.brxe-section > .brxe-text-basic {
  width:100% !important;
  max-width:none !important;
  padding:0 !important;
  margin:0 !important;
}

/* Force-show statically rendered sections */
.bricks-lazy-hidden { display:block !important; opacity:1 !important; visibility:visible !important; }

.brxe-container, .brxe-block { max-width:100% !important; }
.skip-link { background:var(--fn-black); color:var(--fn-off-white); padding:8px 16px; }