@import url('./h1/nav.css');
@import url('./h1/hero.css');

/* ============================================================
   BAMBOO TUMBLER — MAIN STYLESHEET
   ------------------------------------------------------------
   This is your CONTROL PANEL.
   Everything you may want to change lives in :root below.
   Change a value → the whole site updates.
   ============================================================ */

:root {

  /* ==========================================================
     COLORS
     ========================================================== */
  --color-bg:              #0f2417;
  --color-tan:             #C7B197;
  --color-tan-opacity:     0.5;
  --color-tan-hover:       1;
  --color-title:           #C7B197;
  --color-text:            #ffffff;
  --color-button-inner:    #264540;
  --color-stroke:          transparent;   /* nav stroke removed */
  --color-shadow:          transparent;   /* nav shadow removed */
  --color-hover-circle:    #C7B197;

  /* ==========================================================
     FONTS
     ========================================================== */
  --font-display:          'Cinzel Decorative', serif;
  --font-body:             'Figtree', sans-serif;
  --font-feature-label:    'Figtree', sans-serif;

  /* ==========================================================
     NAVIGATION (desktop)
     ========================================================== */
  --nav-top:                32px;
  --nav-width:              580px;
  --nav-height:             51px;
  --nav-radius:             31px;
  --nav-padding-x:          24px;
  --nav-link-gap:           28px;
  --nav-font-size:          0.80rem;
  --nav-letter-spacing:     0.1em;
  --nav-action-color:       #ffffff;
  --nav-logo-color:         #264540;   /* BT logo color */
  --nav-link-color:         #ffffff;
  --nav-link-active-color:  #264540;
  --nav-link-active-bar:    1px;
  --nav-link-active-gap:    0px;
  --nav-logo-size:          30px;
  --nav-icon-size:          24px;
  --nav-cart-total-color:   #ffffff;
  --nav-cart-total-size:    0.85rem;

  /* ==========================================================
     HERO TITLE
     ========================================================== */
  --title-size-line1:       clamp(3rem, 7.5vw, 6rem);
  --title-size-line2:       clamp(2.5rem, 7.5vw, 5.4rem);
  --title-line-height:      0.68;
  --title-letter-spacing:   0.03em;
  --title-weight:           700;
  --title-margin-top:       0;
  --title-padding-x:        0.12em;
  --title-gap-desktop:      -0.1em;

  /* ==========================================================
     TAGLINE
     ========================================================== */
  --tagline-size:           clamp(1.45rem, 1.65vw, 1.35rem);
  --tagline-letter-spacing: 0.1em;
  --tagline-margin-top:     0.1rem;
  --tagline-transform:      uppercase;
  --tagline-color:          #7DD7CC;
  --tagline-weight:         400;

  /* ==========================================================
     DESCRIPTION
     ========================================================== */
  --desc-align:             justify;
  --desc-align-last:        left;
  --desc-size:              clamp(1.06rem, 1.05vw, 0.6rem);
  --desc-line-height:       1.08;
  --desc-max-width:         28.5rem;
  --desc-margin-top:        0.2rem;

  /* ==========================================================
     FEATURE BOXES
     ========================================================== */
  --feature-box-width:      87px;
  --feature-box-height:     93px;
  --feature-box-radius:     0px;
  --feature-box-gap:        14px;
  --feature-box-padding:    0px;
  --feature-icon-size:      58px;
  --feature-label-size:     0.75rem;
  --feature-label-spacing:  0em;
  --feature-label-color:    #264540;
  --feature-label-margin:   0.4rem;
  --feature-margin-top:     2.6rem;
  --feature-box-stroke:     1px;

  /* ==========================================================
     CTA BUTTON
     ========================================================== */
  --cta-outer-w:            182px;
  --cta-outer-h:            38px;
  --cta-inner-w:            150px;
  --cta-inner-h:            33px;
  --cta-radius:             999px;
  --cta-font-size:          0.95rem;
  --cta-letter-spacing:     0.11em;
  --cta-margin-top:         6rem;
  --cta-gradient-speed:     4.5s;
  --cta-gradient-colors:    #C7B197, #264540, #7DD7CC;
  --cta-shadow:             0 4px 12px rgba(0, 0, 0, 0.5);
  --color-button-inner-hover:  #79806F;

  /* ==========================================================
     SOCIAL STRIP
     ========================================================== */
  --social-left:            14px;
  --social-gap:             5px;
  --social-icon-size:       20px;
  --social-item-size:       34px;
  --social-item-radius:     0px;

  /* ==========================================================
     CURSOR HOVER CIRCLE
     ========================================================== */
  --cursor-size-small:      12px;
  --cursor-size-large:      70px;
  --cursor-opacity-small:   1;
  --cursor-opacity-large:   0;
  --cursor-duration:        0.35s;
  --cursor-easing:          cubic-bezier(0.22, 1, 0.36, 1);

  /* ==========================================================
     ENTRY ANIMATION
     --anim-duration        = text slide (left → right)
     --anim-cups-duration   = cups slide (right → left) — independent
     --anim-bamboo-overlap  = fraction (0–1). Bamboo starts when cups
                              are this far through their slide.
                              0.8 = bamboo starts at 80% of cups.
     ========================================================== */
  --anim-distance:          60px;
  --anim-duration:          1.2s;
  --anim-cups-duration:     1.2s;
  --anim-bamboo-overlap:    0.8;
  --anim-easing:            cubic-bezier(0.22, 1, 0.36, 1);
  --anim-stagger:           0.12s;
  --anim-cups-delay:        0s;

  /* Bamboo reveal duration (its own speed) */
  --anim-bamboo-duration:   3.5s;

  /* ==========================================================
     GOLD SHEEN
     ========================================================== */
  --sheen-duration:         6.8s;
  --sheen-delay:            -0.1s;
  --sheen-color:            rgba(255, 240, 210, 0.85);
  --sheen-width:            38%;

  /* ==========================================================
     HERO CUPS IMAGE (right side, slides in from right)
     ========================================================== */
  --cups-width-desktop:     91vw;
  --cups-right:             50px;
  --cups-bottom:            -40px;
  --cups-max-width:         2800px;
  --cups-aspect:            3 / 4;
  --cups-blend:             normal;

  /* ==========================================================
     HERO BAMBOO IMAGE (behind cups, multiplies, reveals from
     bottom up in place — like a growing plant)
     ========================================================== */
  --bamboo-width-desktop:     75vw;
  --bamboo-max-width:         1600px;
  --bamboo-right:             100px;
  --bamboo-bottom:            130px;
  --bamboo-aspect:            3 / 4;
  --bamboo-blend:             multiply;

  /* ==========================================================
     LAYOUT
     ========================================================== */
  --hero-padding-left:      clamp(24px, 15vw, 200px);
  --hero-padding-top:       15vh;
  --hero-content-max:       560px;

  /* ==========================================================
     RESPONSIVE BREAKPOINTS
     --bp-tablet raised to 1400px so iPad Pro (12.9"/13") in
     landscape (1366–1376px) also receives tablet rules.
     ========================================================== */
  --bp-mobile:              640px;
  --bp-tablet:              1600px;

  /* ==========================================================
     ██  TABLET OVERRIDES  (641px – 1400px)
     ========================================================== */
  --nav-top-tablet:             30px;
  --nav-width-tablet:           550px;
  --nav-height-tablet:          56px;
  --nav-radius-tablet:          28px;
  --nav-padding-x-tablet:       20px;
  --nav-link-gap-tablet:        22px;
  --nav-font-size-tablet:       0.78rem;
  --nav-logo-size-tablet:       36px;
  --nav-icon-size-tablet:       20px;
  --nav-cart-total-size-tablet: 0.78rem;

  --hero-padding-left-tablet:   110px;
  --hero-padding-top-tablet:    12vh;
  --hero-content-max-tablet:    520px;

  --title-size-line1-tablet:    clamp(3rem, 6.5vw, 5.5rem);
  --title-size-line2-tablet:    clamp(2.7rem, 6vw, 5rem);
  --title-padding-x-tablet:     0.14em;
  --title-gap-tablet:           -0.1em;

  --tagline-size-tablet:        clamp(1.4rem, 1.3vw, 1.55rem);
  --tagline-margin-top-tablet:  0.1rem;

  --desc-size-tablet:           clamp(0.9rem, 1.1vw, 1.5rem);
  --desc-max-width-tablet:      27.8rem;
  --desc-margin-top-tablet:     0.1rem;

  --feature-box-width-tablet:   85px;
  --feature-box-height-tablet:  90px;
  --feature-icon-size-tablet:   45px;
  --feature-label-size-tablet:  0.9rem;
  --feature-box-gap-tablet:     16px;
  --feature-margin-top-tablet:  3rem;

  --cta-outer-w-tablet:         190px;
  --cta-outer-h-tablet:         43px;
  --cta-inner-w-tablet:         154px;
  --cta-inner-h-tablet:         36px;
  --cta-font-size-tablet:       0.95rem;
  --cta-margin-top-tablet:      4.5rem;

  --social-left-tablet:         10px;
  --social-gap-tablet:          10px;
  --social-item-size-tablet:    30px;
  --social-icon-size-tablet:    18px;

  --cups-width-tablet:          115vw;
  --cups-max-width-tablet:      3000px;
  --cups-right-tablet:          -40px;
  --cups-bottom-tablet:         10px;

  --bamboo-width-tablet:        115vw;
  --bamboo-max-width-tablet:    1400px;
  --bamboo-right-tablet:        -20px;
  --bamboo-bottom-tablet:       245px;

  /* ==========================================================
     ██  MOBILE OVERRIDES  (up to 640px)
     ========================================================== */
  --nav-top-mobile:             62px;
  --nav-width-mobile:           calc(83% - 24px);
  --nav-height-mobile:          52px;
  --nav-radius-mobile:          26px;
  --nav-padding-x-mobile:       14px;
  --nav-logo-size-mobile:       32px;
  --nav-icon-size-mobile:       23px;

  --hero-padding-left-mobile:   18px;
  --hero-padding-top-mobile:    18vh;
  --hero-content-max-mobile:    90%;

  --title-size-line1-mobile:    clamp(2.9rem, 14vw, 3.6rem);
  --title-size-line2-mobile:    clamp(2.3rem, 11.8vw, 3.3rem);
  --title-line-height-mobile:   0.9;
  --title-padding-x-mobile:     0.16em;
  --title-gap-mobile:           -0.2em;

  --tagline-size-mobile:        clamp(0.75rem, 3.4vw, 0.95rem);
  --tagline-margin-top-mobile:  -0.2rem;

  --desc-size-mobile:           clamp(0.65rem, 3.2vw, 1rem);
  --desc-max-width-mobile:      92%;
  --desc-margin-top-mobile:     0.1rem;

  --feature-box-width-mobile:   90px;
  --feature-box-height-mobile:  80px;
  --feature-box-gap-mobile:     10px;
  --feature-icon-size-mobile:   40px;
  --feature-label-size-mobile:  0.85rem;
  --feature-margin-top-mobile:  1rem;

  --cta-outer-w-mobile:         165px;
  --cta-outer-h-mobile:         41px;
  --cta-inner-w-mobile:         145px;
  --cta-inner-h-mobile:         34px;
  --cta-font-size-mobile:       0.85rem;
  --cta-margin-top-mobile:      18rem;

  --cups-hidden-mobile:         none;
  --bamboo-hidden-mobile:       none;

  /* ==========================================================
     ██  H2 — ICON INFO SECTION
     ========================================================== */
  /* --- Desktop --- */
  --h2-bg-color:            #767A69;    
  --h2-padding-y:           50px;      
  --h2-padding-x:           20px;       
  --h2-max-width:           1400px;     
  --h2-gap-x:               40px;       
  
  --h2-icon-size:           100px;       
  --h2-icon-margin:         24px;       
  --h2-title-size:          1.3rem;     
  --h2-title-color:         #7DD7CC;    
  --h2-title-spacing:       0.10em;     
  --h2-title-margin:        16px;       
  --h2-text-size:           0.95rem;    
  --h2-text-color:          #ffffff;    
  --h2-text-line-height:    1.3;        
  --h2-text-max-width:      350px;      

  /* --- Tablet (641px – 1400px) --- */
  --h2-padding-y-tablet:    20px;
  --h2-gap-x-tablet:        35px;
  --h2-gap-y-tablet:        50px;
  --h2-icon-size-tablet:    80px;
  --h2-title-size-tablet:   1.2rem;
  --h2-text-size-tablet:    0.95rem;
  --h2-text-max-width-tablet: 210px;

  /* --- Mobile (up to 640px) --- */
  --h2-padding-y-mobile:    50px;
  --h2-gap-y-mobile:        50px;
  --h2-icon-size-mobile:    70px;
  --h2-title-size-mobile:   0.95rem;
  --h2-text-size-mobile:    0.85rem;


  /* ==========================================================
     Z-INDEX LAYERS
     ========================================================== */
  --z-background:           0;
  --z-bamboo:               1;
  --z-cups:                 2;
  --z-content:              3;
  --z-social:               4;
  --z-nav:                  10;
  --z-mobile-menu:          20;
  --z-cursor:               9999;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}