@charset "UTF-8";
/* ══════════════════════════════════════════════════════════
   COMMON.CSS — Sloth Society
   Design tokens, self-hosted faces, reset, base typography,
   buttons and shared utilities. Loaded on every page, first.
   Nothing page-specific belongs in here.
══════════════════════════════════════════════════════════ */

/* ── SELF-HOSTED FACES ── */
@font-face {
  font-family: 'Grift';
  src: url('../../fonts/Grift-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Grift';
  src: url('../../fonts/Grift-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
	
@font-face {
    font-family: 'Machinkly';
    src: url('../../fonts/machinkly-webfont.woff2') format('woff2'),
         url('../../fonts/machinkly-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


/* ════════════════════════════════════════
   DESIGN SYSTEM TOKENS — v1.0
   Source: Design_System.svg
   ── 01 COLOR PALETTE ──
   Primary Purple    #5C4482  --color-purple
   Pink Accent       #C1637C  --color-pink
   Lavender Surface  #F0E6FF  --color-lavender
   Page Background   #FAF7FF  --color-bg
   Nav Dark          #301B51  --color-dark
   Off White         #EDECEB  --color-offwhite
   Muted Purple-Gray #B1A7C0  --color-muted-purple
   Body Text         #888888  --color-body-text
   Black             #111111  --color-black
   White             #FFFFFF  --color-white
   ── 02 TYPOGRAPHY ──
   font-display  : Bebas Neue  (H1/H2 headings, hero, ticker)
   font-accent   : Bangers      (Ticker accent, fallback Bangers)
   font-ui       : Comfortaa    (Buttons, room titles, UI labels; fallback Machinkly)
   font-sans     : DM Sans      (Body text, descriptions, annotations)
   font-token-bah: Bahianita    (Ticker marquee)
   font-token-agl: Agbalumo     (Ticker-bolder)
   font-token-qua: Quantico     (Ticker body / uppercase labels)
   font-ribbon   : Press Start 2P (Retro highlight font)
   font-ticker-sl: Alfa Slab One (Ticker info / phone numbers)
   ── 04 BUTTONS ──
   PRIMARY  : bg #5C4482 · text white · r-60
   SECONDARY: border #5C4482 · text #5C4482 · r-60
   ACCENT   : bg #C1637C · text white · r-60
   GHOST    : bg white · border white · text #5C4482 · r-60
   SM size  : 40px · px 12 py 5
   MD size  : 48px · px 9 py 5
   ── 05 ROOM TABS ──
   Active tab : bg #FCe6ff · text black · r-tl-14 r-tr-0 r-br-0 r-bl-14
   Inactive   : bg #5C4482 · text white · r-tl-15 r-tr-15 · font-sans 13px
   Panel      : bg #F0e6ff · r-30
   Title      : font-ui bold · 64px · #5C4482
   Body       : font-sans · 16px · #666
   ── 06 TICKER ──
   BG black · py-22px · items separated by 100–120px gap
   ── 07 SPACING ──
   4/xs 8/sm 10/base 15/md 20/lg 30/xl 50/2xl 80/3xl 90/hero 120/gap
   ── 08 BORDER RADIUS ──
   0/none 4/xs 8/sm 15/tab 20/card-sm 20/card 60/btn 135/pill · full
   ── 08 CTA CARD ──
   Container: bg #F0e6ff · border 7px #5C4482 · border-radius 30px
   Dividers : 9px thick + 3px thin stacked (top & bottom)
   Headline : font-display 96px · #5C4482 · tracking -1.92px
   Sub-copy : font-ui 36px · #5C4482 · pink accent word
   Body copy: font-sans 18px · #666666 · center aligned · max-w 400px
   CTA Button: font-ui · 16px · primary variant · bg #5C4482 · r-60
════════════════════════════════════════ */
:root{
  /* ── Colors ── */
  --color-purple: #6944b2;
  --color-pink: #ff63c8;
  --color-lavender:#F0E6FF;
  --color-bg:#FAF7FF;
  --color-dark:#301B51;
  --color-offwhite:#EDECEB;
  --color-muted-purple:#B1A7C0;
  --color-body-text:#888888;
  --color-black:#111111;
  --color-white:#FFFFFF;
  --color-surface:#F0EAF8;
  /* ── Typography ── */
  --font-display:'Bebas Neue',sans-serif;
  --font-accent:'Bangers',cursive;
  --font-ui:'Comfortaa',cursive;
  --font-btn:'Machinkly';
  --font-sans:'DM Sans',sans-serif;
  --font-ticker-bah:'Bahianita',cursive;
  --font-ticker-agl:'Agbalumo',cursive;
  --font-ticker-qua:'Quantico',monospace;
  --font-retro:'Press Start 2P',monospace;
  --font-slab:'Alfa Slab One',serif;
  /* ── Spacing scale ── */
  --sp-xs:4px;
  --sp-sm:8px;
  --sp-base:10px;
  --sp-md:15px;
  --sp-lg:20px;
  --sp-xl:30px;
  --sp-2xl:50px;
  --sp-3xl:80px;
  --sp-hero:90px;
  --sp-gap:120px;
  /* ── Border radius ── */
  --r-none:0;
  --r-xs:4px;
  --r-sm:8px;
  --r-tab:15px;
  --r-card-sm:20px;
  --r-card:20px;
  --r-btn:60px;
  --r-pill:135px;
  /* ── Motion ── */
  --ease:cubic-bezier(.16,1,.3,1);
  --tr:.35s var(--ease);
  /* ── Legacy aliases (keep existing code working) ── */
  --c-bg:var(--color-bg);
  --c-purple-dark:var(--color-dark);
  --c-purple-mid:var(--color-purple);
  --c-pink:var(--color-pink);
  --c-black:var(--color-black);
  --c-white:var(--color-white);
  --c-text-body:var(--color-body-text);
  --ff-head:var(--font-display);
  --ff-body:var(--font-sans);
  --ff-cursive:var(--font-ui);
  --radius:var(--r-card);
  --tr:.35s var(--ease);
  /* ── Legacy aliases (keep existing code working) ── */
  --c-bg:var(--color-bg);
  --c-purple-dark:var(--color-dark);
  --c-purple-mid:var(--color-purple);
  --c-pink:var(--color-pink);
  --c-black:var(--color-black);
  --c-white:var(--color-white);
  --c-text-body:var(--color-body-text);
  --ff-head:var(--font-display);
  --ff-body:var(--font-sans);
  --ff-cursive:var(--font-ui);
  --radius:var(--r-card);
  --tr:.35s var(--ease);
  /* ── Legacy aliases (keep existing code working) ── */
  --c-bg:var(--color-bg);
  --c-purple-dark:var(--color-dark);
  --c-purple-mid:var(--color-purple);
  --c-pink:var(--color-pink);
  --c-black:var(--color-black);
  --c-white:var(--color-white);
  --c-text-body:var(--color-body-text);
  --ff-head:var(--font-display);
  --ff-body:var(--font-sans);
  --ff-cursive:var(--font-ui);
  --radius:var(--r-card);
}

/* ── BASE ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--color-bg);color:var(--color-dark);font-family:var(--font-sans);font-size: 18px;overflow-x:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
/* ── TYPE — exact DS scale ── */
h1,h2,h3,.hd{font-family:var(--font-display);text-transform:uppercase;line-height:.95;letter-spacing: -.03em;color: var(--color-purple);}
/* ════════════════════════════════════════
   HEADING GLOW + COLOUR-PICKING CURSOR
   Hovering an h2/h3 lights a soft radial glow behind the
   text, positioned at the pointer, tinted with whatever
   colour that exact word is painted in. The cursor dot
   picks up the same colour.

   isolation:isolate keeps the z-index:-1 glow inside the
   heading's own stacking context — without it the glow
   would fall behind the section background and vanish.
════════════════════════════════════════ */
h2, h3{position:relative;isolation:isolate}
h2::before, h3::before{
  content:"";
  position:absolute;
  left:-8%;right:-8%;top:-45%;bottom:-45%;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  transition:opacity .45s var(--ease);
  filter:blur(30px);
  background:radial-gradient(
      var(--glow-size,240px) circle at var(--gx,50%) var(--gy,50%),
      var(--glow,rgba(105,68,178,.55)) 0%,
      transparent 62%);
}
h2.is-lit::before, h3.is-lit::before{opacity:1}

/* the dot that trails the pointer over a heading */
.head-cursor{
  position:fixed;left:0;top:0;
  pointer-events:none;z-index:9999;
  will-change:transform;
}
.head-cursor i{
  display:block;width:24px;height:24px;border-radius:50%;
  background:var(--c,var(--color-purple));
  box-shadow:0 0 22px 7px var(--c-soft,rgba(105,68,178,.5));
  transform:translate(-50%,-50%) scale(0);
  transition:transform .32s var(--ease),background-color .22s linear,box-shadow .22s linear;
}
.head-cursor.is-on i{transform:translate(-50%,-50%) scale(1)}

p{font-family:var(--font-sans);line-height: 1.5;color:var(--color-body-text)}
/* ════════════════════════════════════════
   PINK ACCENT — scramble-on-hover target
   inline-block so the word can hold its own
   box while the characters swap (colour is
   still set per-section by .pink)
════════════════════════════════════════ */
h2 .pink{display:inline-block}
/* ── BUTTONS — DS §04: Machinkly · r-60 ── */
.btn-ss{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--r-btn);
  font-family: var(--font-display);
  font-size: 1.25rem;
  cursor:pointer;
  transition:background .38s var(--ease),border-color .38s var(--ease),color .38s var(--ease);
  white-space:nowrap;
  text-decoration:none;
  overflow:hidden;
  position:relative;
}
.pink{color: var(--c-pink);}

/* ════════════════════════════════════════
   BUTTON TEXT SWAP ANIMATION
   Mouse-over:
     .txt-active  → slides RIGHT  + rotates +8deg  → fades out
     .txt-hover   → slides in from LEFT + was -8deg → straightens to 0 → fades in
   Mouse-out reverses automatically via CSS transitions.
════════════════════════════════════════ */

/* both spans share the same transition */
.btn-ss .txt-active,
.btn-ss .txt-hover{
  line-height: 1;
  display:block;
  transition:
    transform .42s cubic-bezier(.34,1.4,.64,1),
    opacity   .38s var(--ease);
  will-change:transform,opacity;
}

/* DEFAULT STATE — active label is centered & visible */
.btn-ss .txt-active{
  transform:translateX(0) rotate(0deg);
  opacity:1;
}

/* DEFAULT STATE — hover label is hidden, parked LEFT, tilted -8deg */
.btn-ss .txt-hover{
  position:absolute;
  inset:0;
  display:flex;align-items:center;justify-content:center;
  transform:translateX(-110%) rotate(-8deg);
  opacity:0;
}

/* HOVER — active exits to RIGHT + rotates +8deg */
.btn-ss:hover .txt-active{
  transform:translateX(110%) rotate(8deg);
  opacity:0;
}
/* HOVER — hover label enters from left, snaps to 0deg */
.btn-ss:hover .txt-hover{
  transform:translateX(0) rotate(0deg);
  opacity:1;
}
/* PRIMARY: bg #5C4482 · text white */
.btn-solid{padding: 1rem 2.2rem;background:var(--color-purple);border:1.5px solid var(--color-purple);color:var(--color-white)}
.btn-solid:hover{background:var(--color-dark);border-color:var(--color-dark);color:var(--color-white)}
/* SECONDARY: border #5C4482 · text #5C4482 */
.btn-outline{padding: 1rem 2.2rem;border:1.5px solid var(--color-purple);background:transparent;color:var(--color-purple)}
.btn-outline:hover{background:var(--color-purple);color:var(--color-white)}
/* ACCENT: bg #C1637C · text white */
.btn-accent{padding:.6rem 1.8rem;background:var(--color-pink);border:1.5px solid var(--color-pink);color:var(--color-white)}
.btn-accent:hover{background:#a84f68;border-color:#a84f68;color:var(--color-white)}
/* GHOST: bg white · border white · text #5C4482 */
.btn-outline-white{padding: .6rem 2.4rem;border:1.5px solid var(--color-white);background:rgba(255,255,255,.15);color:var(--color-white);backdrop-filter:blur(6px)}
.btn-outline-white:hover{background:var(--color-white);color:var(--color-purple)}
/* ── GSAP INIT STATES ──
   Triple-gated so content can never be stranded invisible:
   .js            → only hide if JavaScript actually ran
   .no-gsap       → un-hide if the GSAP CDN failed to load
   .gsap-settled  → un-hide if ScrollTrigger never fired (see common.js) */
html.js:not(.no-gsap):not(.gsap-settled) .g-up{opacity:0;transform:translateY(48px)}
html.js:not(.no-gsap):not(.gsap-settled) .g-left{opacity:0;transform:translateX(-48px)}
html.js:not(.no-gsap):not(.gsap-settled) .g-right{opacity:0;transform:translateX(48px)}
html.js:not(.no-gsap):not(.gsap-settled) .g-fade{opacity:0}


/* ── HOVER UTILITY ── */
.hover-up{transition:transform .3s var(--ease)}
.hover-up:hover{transform:translateY(-5px)}

/* ── REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ══════════════════════════════════════════════════════════
   ADDITIONS FOR THE INNER PAGES
   Tokens and button variants the inner-page designs introduced.
   Nothing here alters the homepage.
══════════════════════════════════════════════════════════ */


:root{
  --color-bg-lav:#F5EFFF;   /* inner-page background — slightly deeper than --color-bg */
  --color-teal:#5CBFCC;     /* already used by the ticker (.mq-chill); now named */
  --badge-cream:#EEDFCA;
  --badge-pink:#F775A5;
  --badge-ink:#681235;
  --rule:rgba(48,27,81,.28);
  --font-badge:'DM Sans',sans-serif;   /* starburst badge text on Become a Sloth */
  --r-panel:24px;
  --r-field:30px;
  --rule-w:440px;           /* page-title rule width — overridden per page */
  --gutter:28px;
}

/* SOFT: Machinkly, sentence case — the footer "Get directions" pill */
.btn-soft{padding: 1rem 2.2rem;background:var(--color-purple);border:1.5px solid var(--color-purple);color:var(--color-white);/* font-family:var(--font-btn); */font-size: 1.25rem;}
.btn-soft:hover{background:var(--color-dark);border-color:var(--color-dark);color:var(--color-white)}
/* GHOST: transparent with a white hairline — used inside coloured plan cards */
.btn-ghost{padding: 1.0rem 2.26rem;border:1.5px solid var(--color-white);background:transparent;color:var(--color-white);/* font-size:1rem; */}
.btn-ghost:hover{background:var(--color-white)}

.btn-ss:focus-visible{outline:3px solid var(--color-pink);outline-offset:3px}