:root{
  --cyan:#64cbe9;
  --cyanDark:#2b6678;
  --glassDark:rgba(49,72,78,.72);
  --glassLine:rgba(216,244,249,.88);
  --text:#c6edf4;

  /* BOX-C #2 animation timing */
  --boxc2-item-delay:.25s;
  --boxc2-girl-delay:1.00s;
  --boxc2-pop-delay:1.20s;
  --boxc2-price-delay:1.45s;
  --boxc2-title-delay:1.70s;
  --boxc2-info-delay:1.90s;

  --heart-scale:0.45;
  --girl-blur:2.8px;
  --pop-blur:2.4px;

  /* BOX-C #1 HUGS independent letter-border controls */
  --landing-h-stroke:transparent;
  --landing-u-stroke:transparent;
  --landing-g-stroke:transparent;
  --landing-s-stroke:transparent;
  --landing-h-stroke-width:0px;
  --landing-u-stroke-width:0px;
  --landing-g-stroke-width:0px;
  --landing-s-stroke-width:0px;

  /* HUGS SHADOW CONTROLS — all three layers are independently editable.
     HARD DISTANCE moves the dark/hard shadow that sits directly below HUGS.
     MID DISTANCE moves the second depth shadow.
     FAR DISTANCE moves the broad projected shadow.
     Change DISTANCE without changing BLUR when you only want the shadows lower. */
  --hugs-shadow-hard-distance:24px;
  --hugs-shadow-hard-blur:5px;
  --hugs-shadow-mid-distance:28px;
  --hugs-shadow-mid-blur:11px;
  --hugs-shadow-far-distance:29px;
  --hugs-shadow-far-blur:23px;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#664933;font-family:Arial,Helvetica,sans-serif}
body{position:fixed;inset:0;overscroll-behavior:none}
#viewport{position:fixed;inset:0;overflow:hidden;background:radial-gradient(circle at 51% 29%,#f3ede7 0 15%,#d2c1b4 34%,#9a765e 63%,#664933 100%)}
#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform:translate(-50%,-50%) scale(1);transform-origin:center center;overflow:hidden}
#stage:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 47%,rgba(255,255,255,.16),transparent 49%);pointer-events:none}


/* =========================================================
   BOX-C CONTAINER SYSTEM
   BOX-C #1 = LANDING / INTRO — RESERVED, NOT BUILT YET.
   BOX-C #2 = BLUE_CLOUD product presentation.
   ========================================================= */
.box-c{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

#boxC2{
  z-index:1;
}

/* Individual BOX-C #2 interface entrance states.
   JS adds .boxc2-active when this product container becomes active. */
#boxC2 .boxc2-enter{
  opacity:0;
  will-change:transform,opacity;
}

#boxC2.boxc2-active .boxc2-girl{
  animation:boxC2GirlIn .75s cubic-bezier(.16,.84,.28,1) var(--boxc2-girl-delay) both;
}
#boxC2.boxc2-active .boxc2-pop{
  animation:boxC2PopIn .70s cubic-bezier(.16,.84,.28,1) var(--boxc2-pop-delay) both;
}
#boxC2.boxc2-active .boxc2-price{
  animation:boxC2PriceIn .65s cubic-bezier(.16,.84,.28,1) var(--boxc2-price-delay) both;
}
#boxC2.boxc2-active .boxc2-title{
  animation:boxC2InfoIn .65s cubic-bezier(.16,.84,.28,1) var(--boxc2-title-delay) both;
}
#boxC2.boxc2-active .boxc2-info{
  animation:boxC2InfoIn .75s cubic-bezier(.16,.84,.28,1) var(--boxc2-info-delay) both;
}

@keyframes boxC2GirlIn{
  from{opacity:0;transform:translate3d(-70px,0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes boxC2PopIn{
  from{opacity:0;transform:translate3d(0,-55px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes boxC2PriceIn{
  from{opacity:0;transform:translate3d(-35px,25px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes boxC2InfoIn{
  from{opacity:0;transform:translate3d(55px,0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

/* BLUE_CLOUD product carousel.
   The item travels RIGHT -> CENTER -> pauses -> LEFT.
   This PNG is the temporary product placeholder. */
#itemCarousel{
  position:absolute;
  inset:0;
  z-index:12;
  overflow:visible;
  pointer-events:none;
}

#itemCarousel .item-slide{
  position:absolute;
  left:50%;
  top:51%;
  width:750px;
  height:750px;
  margin:0;
  opacity:0;
  transform:translate3d(calc(-50% + 1180px),-50%,0);
  will-change:transform,opacity;
}

#blueCloudItem{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
  filter:drop-shadow(0 18px 28px rgba(28,74,91,.22));
}

/* JS adds this class each time the carousel item runs. */
#itemCarousel .item-slide.item-carousel-run{
  animation:blueCloudCarousel 7.4s cubic-bezier(.16,.76,.25,1) both;
}

@keyframes blueCloudCarousel{
  0%{
    opacity:0;
    transform:translate3d(calc(-50% + 1180px),-50%,0);
  }
  8%{opacity:1}
  30%{
    opacity:1;
    transform:translate3d(-50%,-50%,0);
  }
  68%{
    opacity:1;
    transform:translate3d(-50%,-50%,0);
  }
  92%{opacity:1}
  100%{
    opacity:0;
    transform:translate3d(calc(-50% - 1180px),-50%,0);
  }
}

@media (prefers-reduced-motion: reduce){
  #boxC2 .boxc2-enter{opacity:1!important;animation:none!important;transform:none!important}
  #itemCarousel .item-slide{
    opacity:1!important;
    transform:translate3d(-50%,-50%,0)!important;
    animation:none!important;
  }
}

/* 3D */
.three-slot{position:absolute;pointer-events:none;overflow:visible}
.three-slot canvas{display:block;width:100%!important;height:100%!important}
#girl3d{left:120px;top:68px;width:620px;height:850px;z-index:2;filter:blur(var(--girl-blur))}
#product3d{left:1115px;top:35px;width:720px;z-index:1;height:auto;filter:blur(var(--pop-blur))}

/* CLEAN FROSTED GLASS — NO decorative shine blobs/streaks */
#price{
  position:absolute;left:312px;top:347px;width:195px;height:280px;z-index:20;
  border:2px solid rgba(226,248,252,.92);border-radius:12px;overflow:visible;
  background:rgba(75,199,229,.38);
  box-shadow:0 12px 30px rgba(21,52,60,.22),inset 0 0 0 1px rgba(255,255,255,.10);
  backdrop-filter:blur(15px) saturate(125%);
  -webkit-backdrop-filter:blur(15px) saturate(125%);
  color:#1f6278;
}


/* XBO FIX: continuous price border ABOVE #tax.
   #tax's z-index is local to #price; it cannot go "behind" the parent's own border
   by using z-index:19 while #price is z-index:20. */
#price::after{
  content:"";
  position:absolute;
  inset:-2px;
  border:2px solid rgba(226,248,252,.92);
  border-radius:12px;
  pointer-events:none;
  z-index:100;
}
#heart{position:absolute;right:-30px;top:-43px;width:66px;height:66px;transform:rotate(-45deg) scale(var(--heart-scale));transform-origin:center center;background:#76d8ee;border-radius:12px 0 12px 0}
#heart:before,#heart:after{content:"";position:absolute;background:#76d8ee;width:66px;height:66px;border-radius:50%}
#heart:before{top:-32px;left:0}#heart:after{left:32px;top:0}
#priceValue{position:absolute;left:12px;top:18px;font:300 70px/1 Georgia,serif;letter-spacing:1px}
#priceValue small{font:300 28px Arial,sans-serif;margin-left:8px}
#qty{position:absolute;left:13px;right:13px;top:137px;height:64px;display:flex;align-items:center;justify-content:space-between}
#qty button,#qty span{height:55px;border:0;border-radius:7px;background:rgba(39,108,128,.62);color:#c6edf4;display:grid;place-items:center;font:300 35px/1 Georgia,serif}
#qty button{width:42px;cursor:pointer}#qty span{width:63px;font-size:44px}
#tax{position:absolute;left:-2px;right:-2px;bottom:-2px;height:50px;display:flex;align-items:center;justify-content:center;color:#caedf4;font-size:14px;background:rgba(28,100,121,.64);border-radius:0 0 10px 10px;;z-index:19;}

#infoTitle{
  position:absolute;left:1291px;top:193px;width:500px;height:70px;z-index:20;
  border:2px solid var(--glassLine);border-radius:12px;
  background:rgba(48,72,78,.48);
  box-shadow:0 12px 28px rgba(18,36,40,.20),inset 0 0 0 1px rgba(255,255,255,.07);
  color:#d7f7fb;display:flex;align-items:center;justify-content:center;
  font-size:26px;letter-spacing:.5px;
  backdrop-filter:blur(15px) saturate(118%);
  -webkit-backdrop-filter:blur(15px) saturate(118%);
}
#info{
  position:absolute;left:1291px;top:274px;width:500px;height:auto;min-height:0;z-index:20;
  border:2px solid var(--glassLine);border-radius:12px;
  background:rgba(48,72,78,.48);
  box-shadow:0 16px 36px rgba(18,35,39,.22),inset 0 0 0 1px rgba(255,255,255,.06);
  color:#c9eff5;padding:58px 28px;font-size:17px;line-height:1.55;
  backdrop-filter:blur(16px) saturate(118%);
  -webkit-backdrop-filter:blur(16px) saturate(118%);
  overflow:visible;
}
#info p{margin:0 0 36px}#info p:last-child{margin-bottom:0}#info .lead{font-size:17px;text-transform:uppercase}

/* MENU — PURE VECTOR. PERFECT SVG CIRCLE BACKGROUND. NO BACKGROUND IMAGE. NO MORPH. */
#menu{
  position:absolute;
  left:830px;
  top:820px;
  width:260px;
  height:200px;
  z-index:30;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  overflow:visible;
}
#menuBackgroundClip{
  position:absolute;
  left:20px;
  top:52px;
  width:220px;
  height:168px;
  overflow:hidden;
  pointer-events:none;
}
#menuBackgroundVector{
  position:absolute;
  left:0;
  top:-52px;
  width:220px;
  height:220px;
  overflow:visible;
  pointer-events:none;
}
#menuBackgroundVector circle{
  fill:rgba(192,199,219,.86);
}
#menuLogo{
  position:absolute;
  left:50%;
  top:90px;
  width:162px;
  height:162px;
  transform:translate(-50%,-28%);
  pointer-events:none;
}
#menuLogo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .10s linear}
#menuLogo .logo-open{opacity:1}
#menuLogo .logo-close{opacity:0}
#menu:hover #menuLogo .logo-open,#menu:focus-visible #menuLogo .logo-open{opacity:0}
#menu:hover #menuLogo .logo-close,#menu:focus-visible #menuLogo .logo-close{opacity:1}

#status{position:absolute;left:18px;bottom:14px;z-index:100;color:#dff7ff;font:12px/1.3 monospace;opacity:.0;pointer-events:none}
@media(max-width:700px){#infoTitle{left:1030px;top:670px;width:680px}#info{left:1030px;top:752px;width:680px;height:auto;min-height:0;padding:30px}#price{left:160px;top:120px}#menu{top:820px}}

/* Interactive children inside BOX-C #2 */
#boxC2 #price,
#boxC2 #infoTitle,
#boxC2 #info{
  pointer-events:auto;
}


/* =========================================================
   BOX-C #1 — LANDING / INTRO
   Exact vector geometry extracted from the supplied Illustrator files.
   7 independent shapes: H U G S + P O P.
   ========================================================= */
#boxC1{
  z-index:40;
  display:block;
}

#landingWordmark{
  position:absolute;
  left:50%;
  top:47%;
  width:1420px;
  height:auto;
  transform:translate(-50%,-50%);
  overflow:visible;
}

/* POP exact Illustrator colors */
#landing-P-left{fill:#03BBFF;}
#landing-O{fill:#3BCAFE;}
#landing-P-right{fill:#03BBFF;}

/* HUGS exact Illustrator fill. Each letter has its OWN independent border variables.
   BUILD 013: deeper layered Photoshop-style shadows are applied PER LETTER so H/U/G/S
   remain independently animatable in future builds. Geometry/position are untouched. */
.hugs-letter{
  fill:#B18173;
  vector-effect:non-scaling-stroke;
  paint-order:stroke fill;
  stroke-linejoin:round;
  stroke-linecap:round;

  /* BUILD 019: same proven CSS drop-shadow renderer, but ALL Y offsets are
     real variables.  This makes the hard shadow itself move down instead of
     only moving a hidden/soft far layer. */
  filter:none;
}


/* BUILD 033 — OUTER SHADOWS LIVE ON THEIR OWN COPY so the moving mask
   affects shadows without fading/masking the actual HUGS face. */
.landing-hugs-shadow-reveal{
  pointer-events:none;
}
.hugs-shadow-source{
  fill:#B18173;
  stroke:none;
  vector-effect:non-scaling-stroke;
  filter:
    drop-shadow(2px var(--hugs-shadow-hard-distance) var(--hugs-shadow-hard-blur) rgba(45,25,18,.67))
    drop-shadow(7px var(--hugs-shadow-mid-distance) var(--hugs-shadow-mid-blur) rgba(58,34,25,.55))
    drop-shadow(24px var(--hugs-shadow-far-distance) var(--hugs-shadow-far-blur) rgba(49,30,23,.30));
}

.letter-h{stroke:var(--landing-h-stroke, transparent);stroke-width:var(--landing-h-stroke-width,0px);}
.letter-u{stroke:var(--landing-u-stroke, transparent);stroke-width:var(--landing-u-stroke-width,0px);}
.letter-g{stroke:var(--landing-g-stroke, transparent);stroke-width:var(--landing-g-stroke-width,0px);}
.letter-s{stroke:var(--landing-s-stroke, transparent);stroke-width:var(--landing-s-stroke-width,0px);}

/* Development state: BOX-C #1 visible; BOX-C #2 remains intact underneath and is simply hidden. */
body.boxc1-dev #boxC2,
body.boxc1-dev #menu{
  visibility:hidden;
}
body.boxc1-dev #landingHUGS{opacity:0;}

/* =========================================================
   BUILD 010 — V56 BEHAVIOR ONLY, BUILD 007 POSITIONS LOCKED
   Nothing below changes #landingWordmark, H/U/G/S, or #menu coordinates.
   ========================================================= */
#boxC1MotionStage{
  position:absolute;
  inset:0;
  width:1920px;
  height:1080px;
  overflow:visible;
  pointer-events:none;
  z-index:45;
}
#menuFill{
  fill:url(#menuFillGradient);
  stroke:none;
  opacity:0;
  pointer-events:none;
}
#menuLine{
  fill:none;
  stroke:rgba(192,199,219,.86);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 2px 3px rgba(74,52,40,.16));
}
#hugsLivingMorph{
  fill:#ad7c77;
  stroke:none;
  pointer-events:none;
  shape-rendering:geometricPrecision;
}
/* Keep BOX-C #2 hidden during landing work. The original BUILD 007 menu is
   hidden until V56 reaches its COMPLETE final frame, then handed off exactly. */
body.boxc1-dev #boxC2,
body.boxc1-dev #menu{visibility:hidden;}
body.boxc1-dev.boxc1-menu-ready #menu{visibility:visible;}


/* =========================================================
   BUILD 020 — HUGS INNER DEPTH / PHOTOSHOP-STYLE INNER SHADOW
   IMPORTANT: user's outer shadow values above are preserved exactly.
   This overlay adds depth INSIDE each exact H/U/G/S vector only.
   ========================================================= */
.hugs-inner-depth{
  pointer-events:none;
}
.hugs-inner-shadow{
  fill:#B18173;
  stroke:none;
  filter:url(#hugsInnerShadow);
  pointer-events:none;
}


/* =========================================================
   BUILD 021 — SUBTLE HUGS TOP/UPPER-LEFT HIGHLIGHT
   User-modified outer shadows and hard inner shadow above remain untouched.
   This is intentionally restrained: only a small opposing light cue.
   ========================================================= */
.hugs-inner-highlight-depth{
  pointer-events:none;
}
.hugs-inner-highlight{
  fill:#B18173;
  stroke:none;
  filter:url(#hugsInnerHighlight);
  opacity:.72;
  pointer-events:none;
}