/* ==========================================================================
   AOM — Home page styles
   ========================================================================== */

/* ---------- Hero ----------
   One full-viewport scene: the mark and the capsule live in the WebGL
   canvas (opaque, in the hero's own grey); the copy is small and tucked
   into the bottom-left corner, above the canvas so the button stays
   clickable while the rest of the surface belongs to the capsule. */
.home-hero{
  background:var(--grey-300);
  overflow:hidden;
  position:relative;
  /* exactly the first screen: the viewport minus what sits above (utility bar + header) */
  min-height:calc(100vh - var(--header-h) - 39px);
  min-height:calc(100svh - var(--header-h) - 39px);
  height:calc(100svh - var(--header-h) - 39px);
}
@media (max-width:1080px){
  .home-hero{min-height:calc(100svh - var(--header-h));height:calc(100svh - var(--header-h))} /* no utility bar on phones */
}
.home-hero-pill{position:absolute;inset:0}
.home-pill-canvas{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  touch-action:pan-y;   /* sideways drags spin the capsule, vertical swipes still scroll */
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
}
.home-pill-canvas.is-dragging{cursor:grabbing}

/* Daylight: the sun comes in through a window off the top-right corner.
   ::before is the light itself — three panes of warm white separated by
   the thin shadows of the mullions, skewed and blurred so the edges read
   as light on a wall, not as stripes — fading out as it reaches across
   the room. ::after is the room's own shadow pooling bottom-left, which
   gives the flat grey a sense of depth. This is the no-WebGL fallback:
   when the capsule renders, the same wall is painted inside the WebGL
   scene behind it (daylightWall in js/home-capsule.js) and this layer is
   removed. It never takes the pointer and fades with the pill on scroll. */
.home-hero-light{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
}
.home-pill-canvas{z-index:2}
.home-hero-light::before{
  content:"";
  position:absolute;
  top:-38%;
  right:-6%;
  width:72%;
  height:150%;
  background:linear-gradient(90deg,
    transparent 0,
    rgba(255,253,248,.26) 7% 30%,
    rgba(5,6,8,.11) 32% 34.5%,
    rgba(255,253,248,.26) 36.5% 62%,
    rgba(5,6,8,.11) 64% 66.5%,
    rgba(255,253,248,.26) 68.5% 93%,
    transparent 100%);
  /* fades as it crosses the room: strong at the window, gone by the far wall */
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,1) 25%,rgba(0,0,0,.6) 60%,transparent 92%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,1) 25%,rgba(0,0,0,.6) 60%,transparent 92%);
  filter:blur(34px);
  transform:rotate(-32deg) skewX(-10deg) translate3d(0,0,0);
  transform-origin:80% 10%;
  will-change:transform;
}
.home-hero-light::after{
  content:"";
  position:absolute;
  left:-25%;
  bottom:-45%;
  width:95%;
  height:110%;
  background:radial-gradient(closest-side,rgba(5,6,8,.17),rgba(5,6,8,.07) 55%,transparent 100%);
  filter:blur(44px);
}
@media (hover:hover) and (pointer:fine){
  /* the sun moves — imperceptibly per frame, obviously over a minute */
  .home-hero-light::before{animation:home-hero-daylight 46s ease-in-out infinite alternate}
}
@keyframes home-hero-daylight{
  from{transform:rotate(-32deg) skewX(-10deg) translate3d(-1.5%,-1%,0)}
  to{transform:rotate(-34.5deg) skewX(-8deg) translate3d(2.5%,1.5%,0)}
}
@media (max-width:900px){
  .home-hero-light::before{filter:blur(22px);width:110%;right:-30%}
}
@media (prefers-reduced-motion:reduce){
  .home-hero-light::before{animation:none}
}
.home-hero-inner{
  position:absolute;
  inset:0;
  z-index:3; /* the copy sits on top of the capsule */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 var(--gutter);
  pointer-events:none; /* the canvas underneath keeps the drag; only the button takes clicks */
}
.home-hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:72rem;margin:0 auto}
.home-hero-title{
  font-size:clamp(2.6rem,6.2vw,6.2rem);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1;
  /* a soft halo in the canvas colour keeps the ink legible where it crosses the gel */
  text-shadow:0 0 .04em var(--grey-300),0 0 .3em rgba(205,204,210,.85),0 0 .9em rgba(205,204,210,.7);
}
.home-hero-line{display:block}
.home-hero-actions{display:flex;gap:.8rem;margin-top:clamp(1.8rem,4vh,2.6rem);flex-wrap:wrap;justify-content:center;pointer-events:auto}

@media (max-width:900px){
  .home-hero-title{font-size:clamp(2.2rem,10vw,3.2rem)}
  .home-hero-actions{margin-top:1.6rem}
}
/* Pre-hide the entrance-animated elements before GSAP takes over (only when JS runs;
   the inline [data-anim] marker is removed if GSAP is missing or reduced motion is on) */
html[data-anim] .home-pill-canvas,
html[data-anim] .home-hero-title,
html[data-anim] .home-hero-actions{opacity:0}

/* ---------- Partners ----------
   A framed strip a shade lighter than the canvas, the five logotypes
   spread edge to edge: a line glyph, the name in Mona Sans and a mono
   descriptor under it, all slightly knocked back so they read as a
   quiet row of marks, not five headlines. */
.home-partners{
  display:flex;
  align-items:center;
  min-height:175px;
  padding:1.5rem 0;
  background:#EFEFF1; /* between grey-100 and grey-200: lifts off the canvas without going white */
  border:1px solid var(--grey-200);
}
.home-partners .container{width:100%}
.home-partners-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem 2rem;
}
.home-partner{display:flex;align-items:center;gap:.7rem;color:var(--ink);opacity:.82;flex:none}
.home-partner-mark{display:block;width:26px;height:26px;flex:none}
.home-partner-text{display:flex;flex-direction:column}
.home-partner-name{font-weight:600;font-size:1rem;line-height:1.05;letter-spacing:-.0125em;white-space:nowrap}
.home-partner-desc{
  margin-top:4px;
  font-family:var(--font-mono);
  font-size:.62rem;
  line-height:1.2;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--grey-700);
  white-space:nowrap;
}
@media (max-width:900px){
  .home-partners{min-height:0;padding:2rem 0}
  /* two tidy columns instead of a centred zigzag */
  .home-partners-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1.5rem;justify-content:start}
  .home-partner{flex:1 1 auto;min-width:0}
}

/* ---------- Statement ----------
   The type is the whole section: one large sentence whose words brighten
   as the reader scrolls through it (JS splits the words; see index.html). */
.home-statement{padding:8rem 0;background:var(--white)}
.home-statement-inner{display:flex;flex-direction:column;align-items:flex-start}
.home-statement-text{
  font-size:clamp(2rem,4.6vw,3.6rem);
  font-weight:500;
  letter-spacing:-.03em;
  line-height:1.14;
  max-width:19em;
  text-wrap:pretty; /* no one-word last lines */
}
/* Each word: dim until the scroll wave reaches it */
.home-statement-word{
  display:inline-block;
  color:var(--ink);
  opacity:.15;
  will-change:opacity;
}
@media (max-width:820px){
  .home-statement{padding:5rem 0}
}
/* No JS, or reduced motion: the sentence is simply legible */
@media (prefers-reduced-motion:reduce){
  .home-statement-word{opacity:1}
}

/* ---------- Specialties — editorial photo grid, one tile per practice area ---------- */
/* ---------- Marquee ----------
   One line of announcement in the utility bar's voice — mono caps on the
   bare canvas — running continuously, hover or not. Two identical groups
   scroll by half the track width so the loop is seamless; reduced motion
   shows it still. */
.main-wrapper > .home-marquee{border-radius:0}
.home-marquee{padding:1rem 0}
.home-marquee-track{display:flex;width:max-content;animation:home-marquee 42s linear infinite}
.home-marquee-group{display:flex;flex:none}
.home-marquee-item{
  display:inline-flex;
  align-items:center;
  gap:1.6rem;
  padding-right:1.6rem;
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--grey-700);
  white-space:nowrap;
}
.home-marquee-dot{color:var(--purple);font-size:1.1rem;line-height:1}
@keyframes home-marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .home-marquee-track{animation:none}
}

/* ---------- Final CTA ---------- */
.home-cta{
  position:relative;
  background:var(--purple);
  color:var(--white);
  overflow:hidden;
  padding:0 0 6.5rem;
}
.home-cta::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(110% 80% at 85% 110%, rgba(5,6,8,.28), transparent 62%),
    radial-gradient(90% 60% at 12% 0%, rgba(255,255,255,.07), transparent 55%);
}
.cta-inner{
  position:relative;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:4rem;
  align-items:center;
  padding-top:6rem;
}
.cta-title{
  font-size:clamp(2.6rem,5vw,4.5rem);
  line-height:1.04;
  letter-spacing:-.03em;
  font-weight:500;
  max-width:14ch;
}
.cta-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.cta-line>span{display:block;will-change:transform}
.cta-actions{margin-top:2.4rem;display:flex}
/* The pill, floating */
.cta-visual{
  position:relative;
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cta-pill-float{animation:cta-pill-float 7s ease-in-out infinite}
@keyframes cta-pill-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.cta-pill-img{
  display:block;
  height:min(52vh,480px);
  width:auto;
  /* drop-shadow follows the pill's alpha silhouette (box-shadow would draw a rectangle) */
  filter:drop-shadow(0 34px 54px rgba(20,2,64,.55));
}
/* Rotating credential badge */
.cta-badge{
  position:absolute;
  bottom:4%;
  left:-8%;
  width:118px;
  height:118px;
  color:var(--white);
}
.cta-badge svg{width:100%;height:100%;overflow:visible}
.cta-badge-spin{animation:cta-spin 24s linear infinite;transform-origin:60px 60px}
.cta-badge-ring{
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  fill:currentColor;
}
@keyframes cta-spin{to{transform:rotate(360deg)}}
@media (max-width:980px){
  .cta-inner{grid-template-columns:1fr;gap:3.2rem;padding-top:4.5rem;justify-items:center;text-align:center}
  .cta-actions{justify-content:center}
  .cta-pill-video{height:min(42vh,380px)}
  .cta-badge{left:auto;right:-6%;bottom:0;width:100px;height:100px}
}
@media (prefers-reduced-motion:reduce){
  .cta-badge-spin{animation:none}
  .cta-pill-float{animation:none}
}