/* Creative studio / centered hero following the supplied React Bits reference.
   DESIGN_VARIANCE: 8, MOTION_INTENSITY: 7, VISUAL_DENSITY: 3.
   React Bits Silk sits above a quieter page-wide Paper mesh. */
body.home-experience { background: #030405; }
body.home-experience::before,
body.home-experience::after,
.home-experience .ambient-field { display: none; }

.page-mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.17;
  background: radial-gradient(ellipse at 82% 18%, #ad4269, transparent 65%), radial-gradient(ellipse at 15% 80%, #245468, transparent 60%);
}
[data-page-mesh] { position: absolute; inset: 0; opacity: 0; transition: opacity 1200ms ease; }
[data-page-mesh].is-ready { opacity: 1; }

.home-experience .cinematic-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(580px, 72svh, 780px);
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 76px 20px 110px;
}
.home-experience .hero-copy-block { gap: 34px; justify-items: center; text-align: center; }
.home-experience .cinematic-title { max-width: 22ch; font-size: clamp(3.2rem, 7.2vw, 7.25rem); line-height: 1.02; letter-spacing: -0.045em; text-shadow: 0 4px 30px #00000055; }
.home-experience .hero-actions { justify-content: center; flex-direction: row; gap: 14px; margin-top: 4px; }
.home-experience .hero-actions .button { white-space: nowrap; }
.hero-silk {
  position: absolute;
  z-index: -1;
  left: calc(50% - 50vw);
  width: 100vw;
  top: -86px;
  bottom: -1px;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(ellipse at 72% 20%, #5c0b34, transparent 60%), radial-gradient(ellipse at 20% 80%, #3b0923, transparent 65%), #090307;
  mask-image: linear-gradient(to bottom, #000 0%, #000 75%, transparent 100%);
}
[data-silk-background] { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms ease; }
[data-silk-background].is-ready { opacity: 1; }
.hero-silk::after {
  position: absolute;
  inset: 0;
  content: "";
  background: radial-gradient(ellipse at 50% 40%, #08020610, transparent 62%);
}

/* React Bits Blur Text's word stagger and blur-to-focus entrance, adapted to
   native CSS. Four brief animations run once; no looping headline effects. */
.home-experience .silk-title .hero-word {
  display: inline-block;
  animation: heroWordFocus 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(80ms + var(--word-index) * 85ms);
}
@keyframes heroWordFocus {
  from { opacity: 0; filter: blur(10px); transform: translateY(24px); }
  65% { opacity: 0.8; filter: blur(2px); transform: translateY(-2px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

.story-video-toggle[hidden] { display: none; }

/* React Bits-inspired glass surface, with the original specular rim shader. */
.home-experience .button.specular-pill {
  --pill-surface: #11131dde;
  --pill-glow: #a8c6ff;
  min-height: 52px;
  padding-inline: 24px;
  gap: 14px;
  isolation: isolate;
  border: 1px solid #ffffff30;
  border-radius: 999px;
  color: #f9f5fa;
  background: linear-gradient(180deg, #ffffff12, #ffffff00 75%), var(--pill-surface);
  box-shadow: inset 0 1px 0 #ffffff18, inset 0 -1px 0 #00000040, 0 8px 24px #00000030;
  backdrop-filter: blur(12px);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), border-color 260ms, box-shadow 320ms;
}
.home-experience .button.specular-pill.primary {
  --pill-surface: #501330ed;
  --pill-glow: #ffacc8;
  border-color: #ffc5d44f;
}
.specular-pill::before {
  position: absolute;
  content: "";
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 10%, #ffffff10 45%, #ffffff20 50%, transparent 70%);
  opacity: 0;
  transform: translateX(-16%);
  transition: opacity 250ms, transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.specular-pill .specular-fx { position: absolute; inset: -12px; z-index: 1; pointer-events: none; }
.specular-fx canvas { display: block; width: 100%; height: 100%; }
.specular-label, .home-experience .specular-pill::after { position: relative; z-index: 2; }
.home-experience .specular-pill::after { flex: 0 0 16px; transition: transform 280ms; }
.home-experience .button.specular-pill:focus-visible { outline: 2px solid #ffc1d5; outline-offset: 5px; }
.home-experience .button.specular-pill:active { transform: translateY(0) scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .home-experience .button.specular-pill:hover {
    border-color: #ffffff62;
    box-shadow: inset 0 1px 0 #ffffff26, inset 0 -1px 0 #00000040, 0 12px 30px #00000040, 0 0 22px color-mix(in srgb, var(--pill-glow) 14%, transparent);
    transform: translateY(-2px);
  }
  .specular-pill:hover::before { opacity: 1; transform: translateX(0); }
  .home-experience .specular-pill:hover::after { transform: translateX(3px); }
}

.home-experience .eyebrow {
  color: #dbdce0;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 500;
}
.home-experience .card-tag { color: #b4b5bd; font-size: 0.94rem; }
.home-experience .featured-projects { position: relative; }
.home-experience .featured-projects .section-kicker { align-items: center; margin-bottom: 0; }
.home-experience .featured-project-grid { margin-top: 44px; }

.home-experience .scroll-story {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 90px);
  padding-block: clamp(90px, 10vw, 140px);
}
.home-experience .story-pin { top: 128px; gap: 26px; }
.home-experience .story-pin h2 { max-width: 13ch; letter-spacing: -0.025em; }
.story-intro { max-width: 29ch; font-size: 1.1rem; color: #b1b2bb; line-height: 1.6; }
.story-index { display: grid; gap: 0; margin-top: 16px; }
.story-index a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 56px;
  width: fit-content;
  color: #9798a3;
  font-size: 1.05rem;
  transition: color 280ms, transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.story-index a span { font-size: 0.8rem; font-variant-numeric: tabular-nums; color: inherit; }
.story-index a::after { content: ""; height: 1px; width: 36px; background: #ff718e; opacity: 0; transform: scaleX(0); transform-origin: left; transition: transform 380ms, opacity 380ms; }
.story-index a.is-active { color: #f2f3f5; transform: translateX(6px); }
.story-index a.is-active::after { opacity: 1; transform: scaleX(1); }
.story-index a:hover { color: white; }

.home-experience .story-steps { gap: 100px; padding-top: 0; }
.home-experience .story-step { min-height: auto; padding: 0; gap: 28px; border: 0; scroll-margin-top: 112px; }
.story-art {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1.04;
  overflow: hidden;
  border: 1px solid #ffffff14;
  border-radius: 18px;
  isolation: isolate;
}
.story-art::after { position: absolute; inset: 0; content: ""; box-shadow: inset 0 0 70px #00000025; pointer-events: none; }
.story-art-web { background: #171c28; }
.story-web-composition { position: absolute; inset: -5% -4%; transform: rotate(-9deg); }
.story-web-composition img { position: absolute; width: 52%; height: auto; border: 1px solid #ffffff28; border-radius: 6px; box-shadow: 0 20px 50px #00000070; }
.story-web-composition img:first-child { left: 1%; top: 9%; }
.story-web-composition img:last-child { right: -5%; top: -13%; }
.story-art-graphics { background: #382e4a; }
.story-graphics-composition { position: absolute; inset: 0; }
.story-graphics-composition img:first-child { position: absolute; top: -4%; left: -6%; width: 83%; transform: rotate(-10deg); box-shadow: 0 16px 60px #00000055; }
.story-graphics-composition img:last-child { position: absolute; bottom: 8%; right: -7%; width: 90%; transform: rotate(8deg); box-shadow: 0 12px 60px #00000066; }
.story-art-motion { background: radial-gradient(ellipse at 100% 100%, #372526, transparent 65%), #121114; }
.story-motion-composition { position: absolute; inset: 7% 0; display: flex; flex-direction: column; justify-content: center; gap: 28px; transform: rotate(-7deg) scale(1.05); }
.story-motion-composition video { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 526; object-fit: contain; background: #070809; border: 1px solid #ffffff20; box-shadow: 0 10px 40px #00000070; }
.story-motion-composition video:last-child { transform: translateX(7%); }
.story-video-toggle { position: absolute; z-index: 2; right: 14px; bottom: 14px; min-height: 44px; padding: 8px 14px; border: 1px solid #ffffff40; border-radius: 24px; background: #08090be8; color: #eee; font: inherit; font-size: 0.8rem; cursor: pointer; }
.story-caption { display: grid; gap: 12px; }
.story-caption h3 { font-size: clamp(1.5rem, 2.15vw, 2rem); line-height: 1.15; letter-spacing: -0.015em; color: #f2f3f5; }
.home-experience .story-caption p { max-width: 38ch; color: #b1b2bb; }
.story-caption .text-link { width: fit-content; margin-top: 2px; font-size: 0.94rem; color: #e8e8ec; }
.story-caption .text-link::after { content: none; }
.home-experience .story-caption .text-link span { font-size: 1rem; color: inherit; }

.home-experience a:focus-visible,
.home-experience button:focus-visible { outline: 2px solid #ff8ba3; outline-offset: 6px; }

@media (min-width: 1081px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .story-web-composition { animation: webDrift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .story-graphics-composition { animation: graphicDrift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .story-motion-composition { animation: motionDrift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes webDrift { from { transform: translateY(28px) rotate(-9deg); } to { transform: translateY(-48px) rotate(-5deg); } }
@keyframes graphicDrift { from { transform: translateY(28px) scale(1.04); } to { transform: translateY(-20px) scale(0.98); } }
@keyframes motionDrift { from { transform: translateY(22px) rotate(-9deg) scale(1.05); } to { transform: translateY(-20px) rotate(-3deg) scale(1.05); } }

@media (max-width: 1080px) {
  .home-experience .scroll-story { grid-template-columns: 1fr 1fr; gap: 36px; }
  .home-experience .story-pin { position: sticky; top: 110px; }
  .home-experience .story-pin h2 { font-size: clamp(2.6rem, 5vw, 3.8rem); }
  .home-experience .story-steps { gap: 72px; }
}

@media (max-width: 760px) {
  .home-experience .cinematic-hero { min-height: clamp(500px, 68svh, 620px); padding: 68px 18px 98px; }
  .home-experience .hero-copy-block { gap: 28px; width: 100%; }
  .home-experience .cinematic-title { font-size: clamp(2.2rem, 10vw, 3.8rem); }
  .home-experience .hero-actions { flex-wrap: wrap; gap: 12px; }
  .home-experience .hero-actions .button { width: auto; padding-inline: 16px; font-size: 0.84rem; }
  .home-experience .featured-projects .section-kicker { align-items: flex-start; gap: 18px; }
  .home-experience .featured-project-grid { margin-top: 30px; }
  .home-experience .scroll-story { grid-template-columns: 1fr; gap: 44px; padding-block: 74px; }
  .home-experience .story-pin { position: relative; top: auto; gap: 20px; }
  .home-experience .story-pin h2 { max-width: 14ch; font-size: clamp(2.35rem, 10vw, 3.2rem); }
  .story-intro { font-size: 1rem; }
  .story-index { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 0; }
  .story-index a { font-size: 0.88rem; gap: 7px; }
  .story-index a span { font-size: 0.7rem; }
  .story-index a::after { display: none; }
  .story-index a.is-active { transform: none; }
  .home-experience .story-steps { gap: 56px; }
  .home-experience .story-step { gap: 22px; }
  .story-art { aspect-ratio: 1.08; border-radius: 14px; }
  .story-caption h3 { font-size: 1.65rem; }
}

@media (max-width: 380px) {
  .home-experience .hero-actions { flex-direction: column; width: min(100%, 248px); }
  .home-experience .hero-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  [data-silk-background], [data-page-mesh], .story-index a, .story-index a::after { transition: none; }
  .home-experience .silk-title .hero-word { animation: none; }
  .home-experience [data-story-drift] { animation: none; }
  .home-experience .button.specular-pill,
  .home-experience .button.specular-pill::before,
  .home-experience .button.specular-pill::after { transition: none; transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .home-experience .button.specular-pill { backdrop-filter: none; --pill-surface: #18121b; }
  .home-experience .button.specular-pill.primary { --pill-surface: #501330; }
}