/* AlbiMichi.com hub site — shared styles */

/* overflow-x is guarded here, on html, rather than on .page-shell or body: setting it on any
   ancestor of .site-nav forces that ancestor's overflow-y to auto too, which makes it an
   unintended scroll container and breaks the nav's position:sticky float entirely */
html{scroll-behavior:smooth;overflow-x:hidden;}
body{margin:0;background:#F4F6EF;font-family:'Nunito',sans-serif;color:#2B2A26;}
a{color:#2B2A26;text-decoration:none;}
.font-display{font-family:'Baloo 2',sans-serif;}
.navlink:hover{color:#465232;}
.pill:hover{opacity:0.88;}
.row label{cursor:pointer;}
img{max-width:100%;}

.page-shell{width:100%;max-width:1440px;margin:0 auto;box-sizing:border-box;background:#F4F6EF;}

/* thin progress bar tracking scroll position, top of viewport */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;z-index:60;background:linear-gradient(90deg,#7F935D,#AAC1DC);transition:width .08s linear;}

/* sticky nav: shrinks, gains a blur/shadow, and floats as a detached rounded bar once the page scrolls */
.site-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;background:#F4F6EF;border-bottom:1px solid rgba(43,42,38,0.08);padding:clamp(14px,3vw,22px) clamp(20px,6vw,64px);border-radius:0;margin:0;width:100%;box-sizing:border-box;transition:box-shadow .3s ease, background-color .3s ease, padding .3s ease, border-radius .3s ease, margin .3s ease, width .3s ease, top .3s ease;}
.site-nav.scrolled{top:12px;width:calc(100% - 24px);margin:0 auto;border-radius:20px;border-bottom:1px solid transparent;box-shadow:0 10px 30px rgba(43,42,38,0.14);background-color:#F4F6EFF0;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:10px clamp(20px,5vw,40px);}
.nav-logo{height:48px;width:auto;object-fit:contain;display:block;transition:height .25s ease;}
.site-nav.scrolled .nav-logo{height:34px;}

/* mobile nav: hamburger only below 860px, written links only above it */
.nav-links{display:flex;align-items:center;gap:40px;min-width:0;}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;color:#2B2A26;flex-shrink:0;}
/* the dropdown panel is positioned in JS (hero-scene-independent — see site.js) to always sit
   directly under the nav's current on-screen position, so it stays reachable while scrolled */
.mobile-menu{display:none;position:fixed;z-index:49;box-sizing:border-box;max-height:calc(100vh - 90px);overflow:auto;box-shadow:0 12px 30px rgba(43,42,38,0.08);}
.mobile-menu.open{display:flex;flex-direction:column;}
.mobile-menu.scrolled{border-radius:20px;border-bottom:1px solid transparent!important;background-color:#F4F6EFF0!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(43,42,38,0.14);}
@media (max-width:860px){
  .nav-links{display:none;}
  .nav-toggle{display:inline-flex;align-items:center;}
}

/* sign-in pill / email chip: never wrap to a second line */
.nav-pill{white-space:nowrap;flex-shrink:0;}
.nav-email-chip{white-space:nowrap;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;max-width:220px;}

/* hero layout: text stays in one tight column (top half above the image, bottom half below it in that
   same column) with the living scene beside it, so growing the viewport doesn't stretch a gap between them */
.hero-wrap{display:grid;grid-template-columns:minmax(0,460px) minmax(260px,440px);grid-template-areas:"top image" "bottom image";align-items:center;column-gap:clamp(28px,5vw,56px);row-gap:12px;max-width:1040px;margin:0 auto;padding:clamp(40px,8vw,80px) clamp(20px,6vw,64px) clamp(48px,9vw,88px);}
.hero-top{grid-area:top;align-self:end;}
.hero-bottom{grid-area:bottom;align-self:start;}
.hero-content{display:flex;flex-direction:column;gap:16px;}
.hero-image{grid-area:image;display:flex;justify-content:center;align-items:center;}
.hero-cta-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px;}
.hero-cta-row .pill{font-size:16px;padding:16px 30px;text-align:center;}
@media (max-width:860px){
  .hero-wrap{grid-template-columns:1fr;grid-template-areas:"top" "image" "bottom";row-gap:20px;}
  .hero-top,.hero-bottom{align-self:auto;}
}
@media (max-width:560px){
  .hero-cta-row{flex-wrap:nowrap;gap:8px;}
  .hero-cta-row .pill{flex:1 1 0;min-width:0;font-size:clamp(12px,3.6vw,15px);padding:14px 6px;white-space:nowrap;}
}

/* hero fades + rises in once mounted */
.hero-content,.hero-image{opacity:0;transform:translateY(22px);transition:opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1);}
.hero-wrap.hero-in .hero-content{opacity:1;transform:none;}
.hero-wrap.hero-in .hero-image{opacity:1;transform:none;transition-delay:.15s;}

/* ---- per-item creative scroll reveals: each element animates the instant it crosses into view ---- */

/* section headers: soft focus-pull, blur clears as it settles in */
.reveal-blur{opacity:0;filter:blur(6px);transform:translateY(16px);transition:opacity .7s cubic-bezier(.16,1,.3,1), filter .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}
.reveal-blur.in{opacity:1;filter:blur(0);transform:none;}

/* alternating slide directions for rhythm across a row */
.reveal-left,.reveal-up,.reveal-right{opacity:0;transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}
.reveal-left{transform:translateX(-32px);}
.reveal-up{transform:translateY(32px);}
.reveal-right{transform:translateX(32px);}
.reveal-left.in,.reveal-up.in,.reveal-right.in{opacity:1;transform:none;}

/* a gentle 3D tilt-settle, used for cards */
.reveal-tilt{opacity:0;transform:perspective(800px) rotateX(10deg) translateY(18px);transform-origin:bottom center;transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}
.reveal-tilt.in{opacity:1;transform:perspective(800px) rotateX(0deg) translateY(0);}

/* companion cards: bouncy scale+rotate pop-in. transition declared once here so it never clashes with the hover-lift transform below */
.companion-card{transition:transform .45s cubic-bezier(.34,1.56,.64,1), opacity .5s ease;opacity:0;transform:scale(.82) rotate(-4deg);}
.companion-card:hover{transform:translateY(-4px);}
.companion-card.in{opacity:1;transform:scale(1) rotate(0deg);}
.companion-card.in:hover{transform:translateY(-4px);}

/* plain fade-and-rise, same feel as the app's ScrollReveal */
.reveal-fade{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);}
.reveal-fade.in{opacity:1;transform:none;}

/* ---- About page: floating logo + companion bubbles, as in the app ---- */
@keyframes aboutFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
@keyframes aboutPathScroll{from{background-position-x:0;}to{background-position-x:-120px;}}
.about-float{animation:aboutFloat 4s ease-in-out infinite;}

/* overlapping bubble stack; each bubble bobs on its own rhythm, pops in one by one, and grows on hover.
   entrance/hover use the `scale` property so they never fight the float animation's `transform` */
.bubble-stack{display:flex;align-items:center;padding:6px 0;}
.bubble{position:relative;flex-shrink:0;width:clamp(50px,11vw,62px);height:clamp(50px,11vw,62px);border-radius:50%;background:var(--soft,#FFFFFF);border:2.5px solid #FFFFFF;box-shadow:0 4px 10px rgba(43,42,38,0.16);overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  animation:aboutFloat var(--dur,3.4s) ease-in-out infinite;animation-delay:var(--delay,0s);
  opacity:0;scale:.5;transition:opacity .45s ease, scale .55s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;}
.bubble+.bubble{margin-left:-16px;}
.bubble img{width:90%;height:90%;object-fit:contain;pointer-events:none;}
.bubble-stack.in .bubble{opacity:1;scale:1;}
.bubble-stack.in .bubble:nth-child(1){transition-delay:.10s}
.bubble-stack.in .bubble:nth-child(2){transition-delay:.18s}
.bubble-stack.in .bubble:nth-child(3){transition-delay:.26s}
.bubble-stack.in .bubble:nth-child(4){transition-delay:.34s}
.bubble-stack.in .bubble:nth-child(5){transition-delay:.42s}
.bubble-stack.in .bubble:nth-child(6){transition-delay:.50s}
.bubble-stack.in .bubble:hover{scale:1.15;z-index:30!important;box-shadow:0 8px 18px rgba(43,42,38,0.22);transition-delay:0s;}

/* Michi card: the green path strip scrolls endlessly, its top edge softened into the card */
.path-scroll{height:100px;background-color:#AAC1DC33;background-image:url(https://assets.albimichi.com/Exploration/GreenPath.png);background-repeat:repeat-x;background-size:120px auto;background-position:0 bottom;animation:aboutPathScroll 6s linear infinite;}
.path-fade{position:absolute;left:0;right:0;top:0;height:36px;background:linear-gradient(to bottom,#F4F6EF 0%,#F4F6EF00 100%);pointer-events:none;}

/* ---- Homepage hero: a living companion scene (driven by hero-scene.js) ---- */
.hero-scene{position:relative;width:100%;max-width:480px;height:clamp(260px,32vw,420px);box-sizing:border-box;border-radius:32px;box-shadow:0 20px 60px rgba(43,42,38,0.12);overflow:hidden;background:#C9D89A;isolation:isolate;-webkit-tap-highlight-color:transparent;}
/* two stacked backdrop layers: the incoming one fades in on top while gently settling from a slight zoom */
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;z-index:0;transform:scale(1.25);transition:opacity 1.2s ease;}
.hero-bg.is-prev{opacity:1;z-index:1;transition:none;}
.hero-bg.is-active{opacity:1;z-index:2;animation:heroBgSettle 4.2s cubic-bezier(.22,.61,.36,1) both;}
/* stays zoomed in past 1.25 throughout, so the backdrop art's own transparent margins never show at the edges */
@keyframes heroBgSettle{from{transform:scale(1.34);}to{transform:scale(1.25);}}

/* stickers: outer = position + tilt, middle = idle bob, img = pop-in / wobble (so the transforms never fight) */
.hero-sticker{position:absolute;z-index:3;width:21%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(var(--rot,0deg));cursor:pointer;}
.hero-sticker-bob{width:100%;height:100%;animation:heroBob var(--dur,4s) ease-in-out infinite;animation-delay:var(--delay,0s);}
.hero-sticker img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 4px 6px rgba(43,42,38,0.2));user-select:none;-webkit-user-drag:none;}
@keyframes heroBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}

/* companion: slot = placement, walker = walk in/off + tap squish, img = idle float */
.hero-companion-slot{position:absolute;z-index:5;left:50%;bottom:4%;width:44%;aspect-ratio:1;transform:translateX(-50%);}
.hero-walker{width:100%;height:100%;cursor:pointer;}
.hero-companion{width:100%;height:100%;object-fit:contain;display:block;animation:aboutFloat 3.6s ease-in-out infinite;filter:drop-shadow(0 6px 8px rgba(43,42,38,0.18));user-select:none;-webkit-user-drag:none;}

/* staggers whatever sits directly inside a .stagger container, by position */
.stagger>*:nth-child(1){transition-delay:0ms}
.stagger>*:nth-child(2){transition-delay:80ms}
.stagger>*:nth-child(3){transition-delay:160ms}
.stagger>*:nth-child(4){transition-delay:240ms}
.stagger>*:nth-child(5){transition-delay:320ms}
.stagger>*:nth-child(6){transition-delay:400ms}

@media (prefers-reduced-motion: no-preference){
  .float-a{animation:floatY 4.2s ease-in-out infinite;}
  .float-b{animation:floatY 5s ease-in-out infinite;animation-delay:.3s;}
  .float-c{animation:floatY 4.6s ease-in-out infinite;animation-delay:.6s;}
}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}

.scroll-cue{display:inline-flex;animation:bounce 2s ease-in-out infinite;}
@keyframes bounce{0%,100%{transform:translateY(0);opacity:.45;}50%{transform:translateY(6px);opacity:.9;}}

@media (prefers-reduced-motion: reduce){
  .hero-content,.hero-image,.reveal-blur,.reveal-left,.reveal-up,.reveal-right,.reveal-tilt,.reveal-fade,.companion-card,.scroll-cue,.float-a,.float-b,.float-c,.about-float,.bubble,.path-scroll,.hero-bg,.hero-sticker-bob,.hero-companion{transition:none!important;animation:none!important;opacity:1!important;filter:none!important;transform:none!important;scale:1!important;}
}

/* fluid grids: reflow by available width, no breakpoints needed */
.grid-companions{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:20px;}
.grid-how{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px;}
.grid-apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;}

/* delete-account confirmation modal (Account page) */
.modal-overlay{display:none;position:fixed;inset:0;z-index:200;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.open{display:flex;}
.modal-backdrop{position:absolute;inset:0;background:#00000066;}
.modal-card{position:relative;width:100%;max-width:380px;border-radius:24px;padding:28px 24px;background:#FFFFFF;box-shadow:0 24px 60px rgba(43,42,38,0.24);}