@charset "UTF-8";
/* ── CTA background — the shared "Come say hi" component
      pulls its photo from this folder, like every other page. ── */
.cta-frame{background-image:url('bg-cta.webp')}

/* ══════════════════════════════════════════════════════════
   HOME.CSS — homepage sections only (sec 01–09).
   Header, footer, tokens and buttons live in assets/css.
══════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════
   SEC 01 — HERO (fullscreen video/image)
════════════════════════════════════════ */
section.home-sec-01{position:relative;width:100%;height:100vh;overflow:hidden;background:#60d4e8}
	
/* The video had no width/height, so it fell back to the HTML default
   300x150 box — a small centred rectangle (and a broken-media icon if
   the source fails). It now genuinely covers the section. */
section.home-sec-01 video{width:100%;height:100%;object-fit: cover;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.hero-title{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:2;width:max-content;max-width:92vw;pointer-events:none}
.hero-l1{font-family:var(--font-display);font-size:clamp(3.8rem,8vw,9rem);color:var(--color-white);text-transform:uppercase;line-height:.92;display:block;-webkit-text-stroke:2.5px #000;text-stroke:2.5px #000;paint-order:stroke fill}
.hero-l2{display:flex;align-items:center;justify-content:center;gap:.3rem;position:relative}
.hero-l2-text{font-family:var(--font-ui);font-size:clamp(2.6rem,6vw,6.5rem);color:var(--color-white);line-height:1;-webkit-text-stroke:2px #000;text-stroke:2px #000;paint-order:stroke fill}
.hero-heart-img{width:clamp(50px,7vw,100px);height:auto;display:block;animation:hb 1.4s ease-in-out infinite}
@keyframes hb{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
/* starburst behind line 2 */
.hero-burst{position:absolute;top:50%;left:50%;transform:translate(-50%,-48%);width:clamp(180px,26vw,380px);height:clamp(180px,26vw,380px);z-index:-1;background:#fef4a0;clip-path:polygon(50% 0%,55% 22%,76% 8%,65% 30%,95% 28%,75% 46%,95% 66%,70% 58%,67% 85%,50% 70%,33% 85%,30% 58%,5% 66%,25% 46%,5% 28%,35% 30%,24% 8%,45% 22%);opacity:.95}

/* ════════════════════════════════════════
   SEC 02 — MARQUEE (black bar) — nav items
════════════════════════════════════════ */
section.home-sec-02{background:var(--color-black);overflow:hidden;position:relative;z-index: 12;}
.mq-wrap{padding: 1.75rem 0;overflow:hidden}
.mq-track{display:flex;align-items:center;white-space:nowrap;will-change:transform}
.mq-item{display:inline-flex;align-items:center;gap:.6rem;padding:0 1.6rem;flex-shrink:0}
.mq-item img{width: 55px;height: 55px;object-fit:contain;/* filter:brightness(0) invert(1); */flex-shrink:0}
/* DS §06 TICKER: BG black · py-22px · 100-120px gap
   Each item has its own font: Bangers/Bahianita/Agbalumo/Quantico/Alfa Slab/Press Start 2P */
.mq-item span{font-family:var(--font-accent);text-transform:uppercase;color:var(--color-white)}
.mq-item .mq-pink{color:var(--color-pink);font-family:var(--font-retro);letter-spacing:.06em}
.mq-item .mq-bah{color: #5cbfcc;font-family:var(--font-ticker-bah);font-size: 1.7rem;}
.mq-item .mq-chill{color: #5cbfcc;font-family:var(--font-ticker-agl);font-size: 1.7rem;}
.mq-item .mq-agl{color: var(--c-pink);font-family:var(--font-ticker-agl);font-size: 1.5rem;}
.mq-item .mq-qua{font-family:var(--font-ticker-qua);font-size: 1.5rem;}
.mq-item .mq-slab{font-family:var(--font-slab);font-size: 1.25rem;letter-spacing:.04em}
.mq-sep{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.25);flex-shrink:0;margin:0 .2rem}

/* ════════════════════════════════════════
   SEC 03 — ABOUT
   Lavender. Sloth left absolute. 2-col text. 
   4-photo strip at bottom edge.
════════════════════════════════════════ */
/* DS: page bg #FAF7FF */
section.home-sec-03{background:var(--color-bg);position:relative;/* overflow:hidden; */padding:0 0 0;}
.sec03-sloth{z-index: 5;position:absolute;top: -53px;left: -3px;width: 17vw;z-index: 12;pointer-events:none;mix-blend-mode: multiply;}
.sec03-sloth img{width:100%;height:auto;object-fit:contain;display:none;}
.sec03-sloth video{width:100%;height:auto;object-fit:contain;}
.sec03-inner{padding:3.5rem 0 2rem;min-height: 90vh;display: flex;align-items: center;}
/* DS: font-display · color-dark #301B51 · pink #C1637C */
.sec03-headline{font-size:clamp(2rem,4.2vw,4.5rem);/* max-width:560px; */}
.sec03-headline .pink{color:var(--color-pink)}
.sec03-right{padding-top:.5rem;position:relative}
/* DS: font-sans · color-body-text #888 */
.sec03-body{color:var(--color-body-text);margin-bottom:1rem;/*max-width: 400px;*/}
/* DS: badge bg color-purple #5C4482 */
.sec03-badge{position:absolute;right:-10px;bottom:-100px;width:75px;height:75px;border-radius:50%;background:var(--color-purple);display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:2}
.sec03-badge img{/* width:60%; *//* height:60%; */object-fit:contain}
/* photo strip — full container-fluid width */
.sec03-photos{display:flex;gap:0;overflow:hidden;height:280px;position:relative;z-index:1}
.sec03-photo{flex:1;min-width:0;overflow:hidden;position:relative;cursor:pointer}
.sec03-photo img{transition:transform .6s var(--ease)}
.sec03-photo:hover img{transform:scale(1.06)}

/* ════════════════════════════════════════
   SEC 04 — IMAGE MARQUEE (same engine, photos)
   Continuous horizontal scroll of images
════════════════════════════════════════ */
section.home-sec-04{background:var(--color-bg);overflow:hidden;padding: 0 0 20px 0;}
.img-mq-wrap{overflow:hidden;padding:0}
.img-mq-track{display:flex;align-items:flex-end;white-space:nowrap;will-change:transform;gap:20px}
.img-mq-item{flex-shrink:0;/* width:auto; *//* height:auto; *//* max-height:300px; */border-radius:var(--r-card) var(--r-card) 0 0;overflow:hidden;display:flex;align-items:flex-end}
/* NOTE: the original rule had width / height / max-height /
   object-fit inside a malformed comment, so they never applied —
   the gallery was being sized by the global img rule in
   common.css (width:100%;height:100%;object-fit:cover). Only the
   three properties below were ever live. Kept that way on purpose
   so the strip renders exactly as it did before the PHP
   conversion; un-comment the block to change the sizing. */
/* .img-mq-item img{width:auto;height:auto;max-height:300px;object-fit:contain} */
.img-mq-item img{vertical-align:bottom;display:block;transition:transform .5s var(--ease)}
.img-mq-item:hover img{transform:scale(1.06)}

/* ════════════════════════════════════════
   SEC 05 — ROOMS (fixed bg, tabs)
════════════════════════════════════════ */
section.home-sec-05{position:relative;padding: 8rem 0 8rem;background: url('bg-rooms.webp') center/cover no-repeat;background-attachment:fixed;display: flex;align-items: center;justify-content: center;/* z-index: 10; */}
.sec05-overlay{position:absolute;inset:0;background: linear-gradient(180deg, rgba(6, 0, 16, 0.50) 0%, rgba(6, 0, 16, 0.20) 100%);z-index:0;}
.sec05-inner{width: 1100px;position:relative;z-index:1}
/* DS: font-display white · LOVE in color-pink #C1637C */
.sec05-heading{color: var(--color-white);font-size:clamp(2rem,4.5vw,5rem);text-align:center;margin-bottom:2.5rem}
.sec05-heading .pink{color:var(--color-pink)}
/* DS §05: TAB STATES · font-sans (DM Sans) · rounded-tl-14 rounded-tr-15 */
.rooms-tabs .nav-tabs{border:none;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:0}
/* Inactive: bg #5C4482 · text white · r-tl-15 r-tr-15 · font-sans 13px */
.rooms-tabs .nav-tabs .nav-link{color:var(--color-white);background:var(--color-purple);border:none;border-radius:var(--r-tab) var(--r-tab) 0 0;padding: 1rem 1.6rem;transition:var(--tr);cursor:pointer}
.rooms-tabs .nav-tabs .nav-link:hover{background:var(--color-dark);color:var(--color-white)}
/* Active: bg #FCe6ff (offwhite/lavender) · text black · r-tl-14 */
.rooms-tabs .nav-tabs .nav-link.active{background:var(--color-lavender);color:var(--color-black);border:none;font-weight:600;}
.tab-content.g-up {background: var(--color-lavender);border-radius: var(--r-card);}
.tab-pane .row{margin-top:0;/*background: var(--color-lavender);border-radius: var(--r-card);*/}
/* DS Room Card: bg #F0E6FF (lavender) · r-30 · Panel specs */
.room-card{padding: 3.2rem 3rem 3rem;position:relative;border-radius: 20px;overflow: hidden;min-height: 100%;display: flex;align-items: flex-start;flex-direction: column;justify-content: flex-end;}
/* Title: font-ui (Comfortaa) bold · 64px → scaled · #5C4482 */
.room-card h3{font-family:var(--font-display);font-size: 3.4rem;color:var(--color-purple);margin-bottom: 1rem;text-transform:none;line-height:1.1;letter-spacing: 0.5px;}
/* Body: font-sans · 16px · #666 */
.room-card p{color:#666666;/*margin-bottom: 3rem;*/max-width: 100%;}
.room-card quote{/* color:#666666; */margin-bottom: 20px;display: block;}
.room-card quote strong{}
.room-card quote span{
    color: #666666;
}
	
.room-card.rc-01{}
.room-card.rc-02{
    justify-content: flex-start;
}
.room-card.rc-03{
    display: flex;
    justify-content: flex-start;
}
.room-card.rc-04{
    display: flex;
    justify-content: flex-start;
}
/* sloth mascot inside card bottom-left */
.room-mascot{position:absolute;pointer-events:none;z-index:3;mix-blend-mode: multiply;}
.room-mascot.rm-01{top: 5px;left: 15px;width: 30%;}
.room-mascot.rm-02{bottom: -80px;left: -70px;width: 55%;}
.room-mascot.rm-03{bottom: -30px;right: -69px;width: 60%;}
.room-mascot.rm-04{bottom: -40px;left: -32px;width: 55%;}
.room-mascot img{width:100%;height:auto;object-fit:contain;display:none}
.room-mascot video{width:100%;height:auto;object-fit:contain;}
/* room photo */
.room-photo{/* border-radius:var(--r-card); */overflow:hidden;min-height:100%;}
.room-photo img{transition:transform .6s var(--ease)}
.room-photo:hover img{transform:scale(1.05)}
/* explore btn */
.explore-wrap{text-align:center;margin-top:2.5rem}

/* ════════════════════════════════════════
   SEC 06 — DELI (lavender, 2-col)
   Left: text. Right: floating photo collage.
════════════════════════════════════════ */
section.home-sec-06{background:var(--color-bg);padding: 16rem 0 6rem 0;position: relative;z-index: 0;}
/* DS: font-display · color-dark #301B51 · pink #C1637C */
.sec06-headline{font-size: clamp(2rem,4.2vw,4.5rem);}
.sec06-headline .pink{color:var(--color-pink)}
.sec06-body{color:var(--color-body-text);max-width: 480px;margin:1.2rem 0 1.5rem;}
/* Deli right collage — absolute positioned photos */
.deli-collage{position:relative;/* height:580px; */}
.dp{position:absolute;border-radius:var(--r-card);overflow:hidden;border:3px solid var(--color-white);box-shadow:0 6px 24px rgba(0,0,0,.12);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.dp:hover{box-shadow:0 14px 40px rgba(0,0,0,.2)}
.dp img{width:100%;height:100%;object-fit:cover}
.dp-sign{top:0;left:50%;transform:translateX(-30%);width:200px;height:160px}
.dp-burger{top:130px;left:0;width:240px;height:200px}
.dp-pasta{top:360px;left:20px;width:220px;height:185px}
.dp-menu{top:130px;right:0;width:220px;height:400px;transform:rotate(2deg)}
.dp-pizza{top:390px;right:20px;width:200px;height:190px}
.good-food{position:absolute;bottom:90px;right:195px;z-index:10;background:rgba(222,196,240,.92);border-radius:50%;width:88px;height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid rgba(180,140,200,.5);transform:rotate(8deg)}
.good-food span{font-family:var(--font-display);font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-dark);line-height:1.3;text-align:center;display:block}
.good-food .heart-icon{font-size:.9rem;margin-bottom:.1rem}
/* squiggle lines decoration — pure css */
.deco-squig{position:absolute;width:40px;height:40px;pointer-events:none}

.deco-squig::before,.deco-squig::after{content:'';position:absolute;border:2px solid var(--color-dark);border-radius:50%}

.dq1{top:270px;left:160px}
.dq2{bottom:70px;left:200px}

/* ════════════════════════════════════════
   SEC 07 — EVENTS (lavender, 2-col)
   Left: 3 stacked/offset photos.
   Right: text + btn.
════════════════════════════════════════ */
section.home-sec-07{background:var(--color-bg);padding:5rem 0 6rem}
.sec07-headline{font-size: clamp(2rem,4.2vw,4.5rem);}
.sec07-headline .pink{color:var(--color-pink)}
.sec07-body{color: var(--color-body-text);max-width: 480px;margin: 1.2rem 0 1.5rem;}
/* events photo cluster */
.ev-cluster{z-index: 1;position:relative;height: 60vh;}
 .sloth-peeking-side{
    width: 315px;
    height: auto;
    object-fit: contain;
    z-index: -4;
    position: absolute;
    bottom: 10px;
    left: 520px;
    mix-blend-mode: hard-light;
}
.ep{position:absolute;border-radius:var(--r-card);overflow:hidden;border:3px solid var(--color-purple);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.ep:hover{box-shadow:0 14px 36px rgba(0,0,0,.18)}
.ep img{width:100%;height:100%;object-fit:cover}
.ep1{top: 0px;left: 29%;transform:translateX(-50%);width: 180px;height: 180px;}
.ep2{top: 200px;left:0;width:255px;height:215px}
.ep3{bottom:-20px;left:259px;width:285px;height:450px}

/* ════════════════════════════════════════
   SEC 08 — COME SAY HI (fixed bg)
   Whole section = big photo inside rounded border frame
════════════════════════════════════════ */
/* DS §08 CTA CARD section bg = color-bg #FAF7FF */
/* Frame: border 7px #5C4482 · r-30 · fixed bg photo */

/* Container: bg #F0e6ff (lavender) · border 7px #5C4482 · r-30 */
/* Divider lines: 9px thick + 3px thin stacked (top & bottom) */
/* Headline: font-display 96px → clamped · #5C4482 · tracking -1.92px */
/* Sub-copy: font-ui (Comfortaa) 36px → scaled · #5C4482 · pink accent */
/* Body copy: font-sans 18px → · #666 · center · max-w 400px */
/* sloth mascot sitting on top of card */

section.home-sec-09 {background: var(--color-pink);padding: 100px 0px 100px 0px;position:relative;z-index: 9;}
/* The curve used to be this ellipse — a border-radius shape can't be
   deformed, so it's been replaced by the pluckable SVG in sec-09.
   Kept here (disabled) for reference / quick rollback. */
/* section.home-sec-06:after{content:"";width: 140%;height: 800px;background: #301b51;position: absolute;top: -650px;left: 50%;transform: translateX(-50%);border-radius: 100%;z-index: -1;} */

/* ════════════════════════════════════════
   ELASTIC CURVE — the sec09 → sec06 boundary
   Sits at the bottom edge of the dark section and
   bulges down into the light one. Full-bleed via
   preserveAspectRatio="none".
════════════════════════════════════════ */
.curve-elastic{
  position:absolute;
  left:0;
  top:100%;
  width:100%;
  height: 360px;
  z-index:2;
  line-height:0;
  pointer-events:none;
  /* nudge up 1px to kill any sub-pixel seam against the section above */
  margin-top:-1px;
}
.curve-elastic svg{display:block;width:100%;height:100%}
.curve-elastic path{fill:var(--color-pink);}
section.home-sec-09 .fh-day{margin-bottom:40px;}
section.home-sec-09 .tickets-wrapper{height: 350px;z-index: 99;position: relative;top: -135px;}
section.home-sec-09 .tickets-wrapper .ticket{width: 190px;transform-origin: top left;position: absolute;top: 0px;left: 0px;}

/* ── Draggable tickets ──
   touch-action:none stops the browser scrolling while you drag a
   ticket (scoped to the ticket only, so the page still scrolls
   everywhere else). -webkit-user-drag kills the native image drag
   ghost, which would otherwise hijack the gesture. */
section.home-sec-09 .tickets-wrapper .ticket:not(.t-pin){
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-drag:none;
  will-change:transform;
}
section.home-sec-09 .tickets-wrapper .ticket.is-dragging{cursor:grabbing}
/* mid-flight: falling, landed or flying home — not grabbable */
section.home-sec-09 .tickets-wrapper .ticket.is-busy{pointer-events:none;cursor:default}
section.home-sec-09 .tickets-wrapper .ticket.t-pin{pointer-events:none}
section.home-sec-09 .tickets-wrapper .ticket.t-01{}
section.home-sec-09 .tickets-wrapper .ticket.t-02{}
section.home-sec-09 .tickets-wrapper .ticket.t-03{}
section.home-sec-09 .tickets-wrapper .ticket.t-pin{
    width: 40px;
    z-index: 9;
    top: -50px;
	left:20px;
}
	
section.home-sec-09 p{color:#ffffff;font-size:21px;}

section.home-sec-09 #scene {display:inline-block;position:relative;perspective: 900px;perspective-origin: 50% 50%;}
section.home-sec-09 #face-wrap {position:relative;transform-style: preserve-3d;will-change: transform;}
section.home-sec-09 .layer {position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible;}
section.home-sec-09 #mood {color: var(--c-pink);font-size:0px;opacity:0;position:absolute;bottom: -66px;left:50%;transform:translateX(-50%);text-transform:uppercase;pointer-events:none;}
	
	

/* ── RESPONSIVE (homepage sections) ── */
@media(max-width:991px){
  .sec03-photos{height:200px}
  .deli-collage,.ev-cluster{min-height:340px;height:340px}
  .dp,.ep{position:static!important;display:block;margin:.5rem auto;transform:none!important;max-width:90%}
  .dp{height:180px}
  .ep{height:180px}
  .good-food{display:none}
}
@media(max-width:767px){
  .hero-l1{-webkit-text-stroke:1.5px #000}
  .hero-l2-text{-webkit-text-stroke:1.5px #000}
  .sec03-photos{height:160px}
}
s