/* ============================================================
   home.css — home page only (index.html + en/index.html)
   Loaded after main.css.
   ============================================================ */

/* Staggered reveal for grid rows */
.cases .reveal:nth-child(2n),
.exp .reveal:nth-child(2n){transition-delay:.09s}

/* ============ Hero ============ */
/* Home content top padding above the hero (overrides main.css .wrap) */
.wrap{padding-top:4rem}
.hero{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2rem;max-width:65%;perspective:900px}
.hero .sub{color:var(--muted)}
.hero .avatar{
  position:relative;
  width:14rem;height:14rem;
  cursor:pointer;will-change:transform;transition:transform .35s var(--ease);
}
.avatar__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:50%;clip-path:circle(50%);
}
/* Liquid-reveal layer used when swapping the hero photo (home.js): the new face materialises out
   of a turbulent ripple (SVG displacement filter, animated in JS) while it fades in. */
.avatar__liquid{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:50%;-webkit-clip-path:circle(50%);clip-path:circle(50%);opacity:0;will-change:filter,opacity}
.hero .avatar:hover{transform:scale(1.03)}
.status-dot{
  position:absolute;bottom:9%;right:9%;z-index:2;
  width:15%;height:15%;max-width:25px;max-height:25px;min-width:11px;min-height:11px;
  background:#22c55e;border-radius:50%;pointer-events:none;
}
.status-dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:#22c55e;
  animation:pulseDot 2s var(--ease) infinite;
}
@keyframes pulseDot{0%{transform:scale(1);opacity:.5}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}
@media(max-width:1279px){.hero{max-width:100%}}
/* Hero avatar — stepped sizes per breakpoint (base 14rem covers 1280–1919px) */
@media(max-width:1279px){.hero .avatar{width:12rem;height:12rem}}
@media(max-width:767px){.hero .avatar{width:10rem;height:10rem}}
@media(min-width:1900px){.hero .avatar{width:16rem;height:16rem}}
/* Hero vertical rhythm scales down proportionally on mobile */
@media(max-width:767px){.wrap{padding-top:2.5rem}.hero{gap:1.25rem}}

/* Celebration particles */
.confetti{
  position:fixed;z-index:60;pointer-events:none;
  line-height:1;text-align:center;
  will-change:transform,opacity;
}

/* ============ Section titles ============ */
.section-title{margin-bottom:var(--gap-title)}

/* ============ Media (cases & logo carousels) ============ */
.media{
  position:relative;overflow:hidden;border-radius:var(--r-media);
  aspect-ratio:3/2;background:var(--media-bg);margin-bottom:var(--space-4);
  transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.media video,.media .slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.media .slide{opacity:0}
.media .slide.active{opacity:1}

/* ============ Cases ============ */
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-card) var(--space-8)}
.case:hover .media{transform:translateY(-8px) translateZ(0);box-shadow:0 34px 60px -30px rgba(39,39,39,.32)}
.case:hover .media video,.case:hover .media .slide.active{transform:scale(1.05)}
.case h4{margin-bottom:var(--space-1)}
.case .roles{color:var(--muted)}
.case-link{display:block;color:inherit}

/* ============ Stories ============ */
/* One full-bleed row: no wrapping; bubbles that don't fit scroll off-screen (like the mobile image carousel) */
.stories{display:flex;gap:1.5rem;flex-wrap:nowrap;align-items:flex-start;margin:3.5rem calc(-1 * var(--pad)) 0;padding:.5rem var(--pad);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.story{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.6rem;width:7.5rem;flex:0 0 auto}
.story__ring{width:7rem;height:7rem;border-radius:50%;padding:3px;background:conic-gradient(from 210deg,#304ffe,#7d5cff,#304ffe);display:block;transition:transform .25s var(--ease)}
.story__thumb{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--media-bg);border:3px solid var(--bg)}
.story__media{width:100%;height:100%;object-fit:cover;display:block}
.story__label{font-size:var(--fs-caption);line-height:1.2;color:var(--ink);text-align:center;transition:color .2s var(--ease)}
.story:hover .story__ring{transform:scale(1.05)}
.story:hover .story__label{color:var(--blue)}
/* Story bubbles — stepped sizes per breakpoint (base 7rem covers ≥1280px) */
@media(max-width:1279px){
  .story{width:6.5rem}
  .story__ring{width:6rem;height:6rem}
}
@media(max-width:767px){
  .stories{gap:1rem;margin-top:2.5rem}
  .story{width:5.5rem}
  .story__ring{width:5rem;height:5rem}
}

/* ============ Stories viewer (fullscreen, Instagram-style) ============ */
.stviewer{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;background:rgba(20,20,25,.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s var(--ease)}
.stviewer.open{opacity:1;visibility:visible}
.stviewer__card{position:relative;--st-pad:var(--space-8);width:min(420px,92vw);height:min(90vh,760px);background:#000;border-radius:var(--r-media);overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
@media(max-width:1023px){.stviewer__card{--st-pad:var(--space-6)}}
@media(max-width:767px){.stviewer__card{--st-pad:var(--space-4)}}
.stviewer__bars{position:absolute;top:.75rem;left:.75rem;right:.75rem;z-index:4;display:flex;gap:4px}
.stbar{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden}
.stbar i{display:block;height:100%;width:0;background:#fff;border-radius:3px}
.stviewer__x{position:absolute;top:var(--st-pad);right:var(--st-pad);z-index:5;display:inline-flex;align-items:center;justify-content:center;height:3.25rem;padding:.8rem 1.15rem;border:none;border-radius:var(--r-btn);background:#20222b;color:#e9eaec;font-size:1.05rem;line-height:1.5;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.stviewer__x:hover{background:#e9eaec;color:#111318;transform:translateY(-2px)}
.stviewer__link{display:none;position:absolute;top:var(--st-pad);left:var(--st-pad);z-index:5;align-items:center;justify-content:center;height:3.25rem;padding:.8rem 1.15rem;font-size:var(--fs-btn);line-height:1.5;border-radius:var(--r-btn);background:var(--blue);color:#fff;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.stviewer.has-link .stviewer__link{display:inline-flex}
.stviewer__link:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.stviewer__link svg{height:1.05em;width:auto;display:block}
.stviewer__stage{position:absolute;inset:0}
.ststage__bg{position:absolute;inset:0;background-size:cover;background-position:center}
video.ststage__bg{width:100%;height:100%;object-fit:cover}
.ststage__scrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 22%)}
.ststage__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:3.5rem var(--st-pad) var(--st-pad);color:#fff;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.5) 45%,rgba(0,0,0,0) 100%)}
.ststage__title{color:#fff;margin-bottom:.6rem;font-size:var(--fs-h5);font-weight:var(--fw-semibold);line-height:1.2;letter-spacing:-.4px}
.ststage__text{margin:0;font-size:var(--fs-h5);font-weight:var(--fw-medium);line-height:var(--lh-h5);color:#fff;max-width:none}
.stviewer__zone{position:absolute;top:0;bottom:0;z-index:3;border:none;background:transparent;cursor:pointer;padding:0}
.stviewer__zone--prev{left:0;width:33%}
.stviewer__zone--next{right:0;width:67%}
.badge{
  position:absolute;top:1rem;right:1rem;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--blue);color:#fff;font-size:var(--fs-micro);font-weight:var(--fw-medium);line-height:1;
  padding:.4rem .75rem;border-radius:1rem;
}
@media(max-width:767px){
  .cases{grid-template-columns:1fr;gap:var(--space-12)}
  .media{border-radius:20px}
  .stviewer__card{border-radius:20px}
  .stviewer__link,.stviewer__x{height:3rem;top:calc(var(--st-pad) + .5rem)}
}

/* ============ Experience ============ */
.exp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-12) var(--space-8)}
.exp-item{display:flex;flex-direction:column;gap:var(--space-4)}
.exp-logo{width:7rem;height:7rem;border-radius:50%;object-fit:cover;background:var(--surface)}
/* Company logo — stepped sizes matching the story bubbles (base 7rem covers ≥1280px) */
@media(max-width:1279px){.exp-logo{width:6rem;height:6rem}}
.exp-logo.media{aspect-ratio:1;margin-bottom:0}
.exp-item .co{margin-top:.1rem}
.exp-item .dt{color:var(--muted)}
@media(max-width:767px){.exp{grid-template-columns:1fr;gap:var(--space-10)}.exp-logo{width:5rem;height:5rem}}

/* ============ Reduced motion (home extras) ============ */
@media(prefers-reduced-motion:reduce){
  .media,.media video,.media .slide{transition:opacity .3s linear}
  .case:hover .media,.case:hover .media video,.case:hover .media .slide.active{transform:none}
  .status-dot::after{animation:none}
}