/* V6.1 final polish: theme-correct CTA, uniform model marks, stable hero first paint. */

/* The no-data Hero is a complete theme surface, never a half-dark placeholder. */
html[data-theme="day"] .hero-fallback{
  background:
    radial-gradient(circle at 72% 34%,rgba(150,141,237,.13),transparent 28%),
    radial-gradient(circle at 88% 14%,rgba(136,124,235,.10),transparent 26%),
    linear-gradient(145deg,#F7F4EF 0%,#F4F1FA 58%,#EEEAF6 100%);
}
html[data-theme="night"] .hero-fallback{
  background:
    radial-gradient(circle at 72% 34%,rgba(150,141,237,.18),transparent 29%),
    radial-gradient(circle at 88% 14%,rgba(122,107,229,.09),transparent 26%),
    linear-gradient(145deg,#0B0A0D 0%,#09080D 62%,#0D0B12 100%);
}

/*
   Keep first paint local and quiet. The managed Hero media already arrives from
   the canonical Explore feed, so do not issue a separate /api/explore-hero
   redirect request just to paint the same asset a few milliseconds earlier.
*/
.hero-media-layer::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background-image:none;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:1;
  transition:opacity .18s ease;
}
.hero-media-layer:has(> .hero-primary-ready)::before{opacity:0}

/* Keep the Hero fallback underneath the managed primary media so a progressive image/video
   never paints as a half-decoded frame. The media is revealed only after it is ready. */
.hero-media-layer{background:var(--surface);}
.hero-media-layer>.hero-fallback{position:absolute;inset:0;z-index:0;}
.hero-media-layer>img,
.hero-media-layer>video{position:relative;z-index:2;opacity:0;transition:opacity .18s ease;}
.hero-media-layer>.hero-primary-ready{opacity:1;}

/* Avoid showing em-dash model counts as a loading state. The status appears only after the
   canonical feed/model render has completed. */
body:not([data-loading="0"]) .hero-status{opacity:0;visibility:hidden}
body[data-loading="0"] .hero-status{opacity:1;visibility:visible;transition:opacity .14s ease}

@media(prefers-reduced-motion:reduce){
  .hero-media-layer>img,.hero-media-layer>video,.hero-media-layer::before{transition:none}
}

/* Model strip: one optical box, one monochrome material, no chip/card/shape treatment. */
.model-logo-marquee{align-items:center;}
.model-logo-group{align-items:center;}
.model-logo-item{
  width:72px;
  height:64px;
  opacity:.68;
  display:grid;
  place-items:center;
  flex:0 0 72px;
  transform:none;
}
.model-logo-item:hover{opacity:.92;transform:none;}
.model-logo-item img{
  width:30px!important;
  height:30px!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:brightness(0) saturate(100%)!important;
  opacity:1!important;
  transform-origin:center;
}
html[data-theme="night"] .model-logo-item img{filter:brightness(0) saturate(100%) invert(1)!important;}
/* Optical compensation for marks whose SVG viewBoxes carry more internal whitespace. */
.model-logo-item img[src*="bytedance"]{transform:scale(1.14)}
.model-logo-item img[src*="flux"]{transform:scale(1.08)}
.model-logo-item img[src*="kling"]{transform:scale(1.06)}
.model-logo-item img[src*="veo"]{transform:scale(.88)}
.model-logo-item img[src*="openai"]{transform:scale(.94)}
.model-logo-item img[src*="gemini"]{transform:scale(1.04)}
.model-logo-item img[src*="qwen"]{transform:scale(.96)}
.model-logo-item img[src*="grok"]{transform:scale(.96)}
.model-logo-item img[src*="topaz"]{transform:scale(1.02)}
.model-logo-item img[src*="recraft"]{transform:scale(.98)}

/* See it. Make it. follows the actual Day/Night theme using the approved violet reference. */
html[data-theme="night"] .final-card{
  background:
    radial-gradient(circle at 78% 18%,rgba(150,141,237,.28),transparent 30%),
    linear-gradient(130deg,#0B0A0D 0%,#171326 38%,#453B8E 72%,#968DED 100%);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 26px 80px rgba(0,0,0,.26);
}
html[data-theme="night"] .final-card .eyebrow{color:rgba(255,255,255,.62)}
html[data-theme="night"] .final-card h2 em{color:#D8D3FF}
html[data-theme="night"] .final-card .ghost-btn{border-color:rgba(255,255,255,.28);color:#fff;background:rgba(0,0,0,.12)}

html[data-theme="day"] .final-card{
  background:
    radial-gradient(circle at 82% 14%,rgba(255,255,255,.58),transparent 29%),
    linear-gradient(132deg,#FBFAFF 0%,#ECE8FF 36%,#B2A9F5 70%,#968DED 100%);
  color:#171217;
  border:1px solid rgba(19,18,23,.09);
  box-shadow:0 24px 70px rgba(69,59,142,.13);
}
html[data-theme="day"] .final-card:after{opacity:.10;filter:brightness(0)}
html[data-theme="day"] .final-card .eyebrow{color:rgba(23,18,23,.58)}
html[data-theme="day"] .final-card h2 em{color:#453B8E}
html[data-theme="day"] .final-card .ghost-btn{border-color:rgba(23,18,23,.22);color:#171217;background:rgba(255,255,255,.18)}
html[data-theme="day"] .final-card .ghost-btn:hover{background:rgba(255,255,255,.38);border-color:rgba(23,18,23,.30)}

@media(max-width:820px){
  .model-logo-group{gap:30px;padding-inline:22px}
  .model-logo-item{width:64px;height:58px;flex-basis:64px}
  .model-logo-item img{width:28px!important;height:28px!important}
}

@media(max-width:560px){
  .model-logo-group{gap:24px;padding-inline:18px}
  .model-logo-item{width:58px;height:54px;flex-basis:58px}
  .model-logo-item img{width:26px!important;height:26px!important}
}

/* --------------------------------------------------------------------------
   Hero-only reference polish V1
   Scope is intentionally restricted to the existing Landing Hero and the
   immediately-following model strip. No page/header/theme/global shell changes.
   -------------------------------------------------------------------------- */
.hero{
  --sm-hero-violet:#968DED;
  --sm-hero-violet-soft:#D8D3FF;
}

@media(min-width:1101px){
  .hero-shot-stack{
    position:relative;
    isolation:isolate;
    width:min(620px,100%);
    height:452px;
    padding:43px 12px 12px;
    gap:10px;
    overflow:hidden;
    border:1px solid color-mix(in srgb,var(--text) 13%,transparent);
    border-radius:24px;
    background:color-mix(in srgb,var(--bg-elev) 84%,transparent);
    box-shadow:0 28px 80px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    animation:smHeroFrameIn .82s cubic-bezier(.2,.72,.16,1) both;
  }
  .hero-shot-stack::before{
    content:"SEEMOTIONS  ·  LIVE WORK";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:34px;
    display:flex;
    align-items:center;
    padding:0 14px;
    border-bottom:1px solid color-mix(in srgb,var(--text) 9%,transparent);
    color:color-mix(in srgb,var(--text) 54%,transparent);
    font-size:8px;
    font-weight:650;
    letter-spacing:.11em;
    pointer-events:none;
    z-index:4;
  }
  .hero-shot-stack::after{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    right:-90px;
    top:-110px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(150,141,237,.18),rgba(150,141,237,0) 68%);
    filter:blur(4px);
    pointer-events:none;
    z-index:-1;
    animation:smHeroAmbient 8s ease-in-out infinite alternate;
  }
  .hero-shot{
    border-color:color-mix(in srgb,var(--text) 14%,transparent);
    box-shadow:0 12px 34px rgba(0,0,0,.16);
  }
  .hero-shot:hover{
    transform:translateY(-2px) scale(1.003);
    border-color:color-mix(in srgb,var(--sm-hero-violet) 58%,transparent);
  }
}

.hero-media-layer>.hero-primary-ready{
  animation:smHeroMediaDrift 13s ease-in-out infinite alternate;
  transform-origin:62% 48%;
  will-change:transform;
}
.hero-dots{
  animation:smHeroDotsDrift 18s linear infinite alternate;
}

@keyframes smHeroFrameIn{
  from{opacity:0;transform:translate3d(0,16px,0) scale(.992)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes smHeroAmbient{
  from{transform:translate3d(-10px,8px,0) scale(.92);opacity:.58}
  to{transform:translate3d(18px,-12px,0) scale(1.08);opacity:1}
}
@keyframes smHeroMediaDrift{
  from{transform:scale(1.012) translate3d(0,0,0)}
  to{transform:scale(1.035) translate3d(-.45%,.25%,0)}
}
@keyframes smHeroDotsDrift{
  from{background-position:0 0}
  to{background-position:18px 9px}
}

/* Live executable model catalog: two equal groups create a true endless loop. */
.model-strip-track{
  display:block!important;
  min-height:68px!important;
  padding:0!important;
  overflow:hidden!important;
}
.sm-model-marquee{
  display:flex;
  align-items:center;
  width:max-content;
  min-width:100%;
  min-height:68px;
  transform:translate3d(0,0,0);
  animation:smModelLoop var(--sm-model-duration,58s) linear infinite;
  will-change:transform;
}
.sm-model-group{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  gap:clamp(24px,2.5vw,48px);
  padding-inline:clamp(24px,3vw,48px);
}
.sm-model-item{
  width:64px;
  height:68px;
  flex:0 0 64px;
  display:grid;
  place-items:center;
  opacity:.58;
  transition:opacity .18s ease,transform .18s ease;
}
.sm-model-item:hover{opacity:.94;transform:translateY(-1px)}
.sm-model-item img,
.sm-model-item svg{
  width:28px;
  height:28px;
  display:block;
  object-fit:contain;
  object-position:center;
  opacity:1;
}
.sm-model-item img{filter:brightness(0) saturate(100%)}
html[data-theme="night"] .sm-model-item img{filter:brightness(0) saturate(100%) invert(1)}
.sm-model-item svg{color:var(--text)}
.sm-model-item svg text{fill:currentColor}
@keyframes smModelLoop{to{transform:translate3d(-50%,0,0)}}

@media(max-width:820px){
  .sm-model-group{gap:24px;padding-inline:20px}
  .sm-model-item{width:58px;height:62px;flex-basis:58px}
  .sm-model-item img,.sm-model-item svg{width:26px;height:26px}
}

@media(prefers-reduced-motion:reduce){
  .hero-shot-stack,
  .hero-shot-stack::after,
  .hero-media-layer>.hero-primary-ready,
  .hero-dots,
  .sm-model-marquee{
    animation:none!important;
  }
}