@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  --plum: #211229;
  --pearl: #fff3e8;
  --rose: #ffb1c8;
  --lavender: #c4a7f6;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html { background: var(--plum); scrollbar-color: #a778ad var(--plum); }
body { margin: 0; color: var(--pearl); font-family: Manrope, sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: #edb6dd; color: #291735; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
.ui-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.hero { overflow: clip; }
.hero-stage {
  --edge: clamp(24px, 4.8vw, 100px);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: max(680px, 100svh);
  padding: 120px var(--edge) 110px;
  background: radial-gradient(ellipse at 51% 105%, #803653 0%, transparent 58%), radial-gradient(ellipse at 66% 32%, #563376 0%, transparent 60%), #211229;
}
.stage-light { position: absolute; inset: 0; z-index: -3; pointer-events: none; background: linear-gradient(115deg, #150b211f 16%, transparent 45%, #100c256b), radial-gradient(ellipse at 10% 55%, #b34d7129, transparent 42%); }
.hero-stage::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; box-shadow: inset 0 -70px 100px #190c2529; }
.backtype { position: absolute; left: 50%; top: 45%; width: max-content; transform: translate(-50%, -50%) rotate(-7deg); color: transparent; -webkit-text-stroke: 1px #e6b9e316; font-size: clamp(180px, 27vw, 620px); font-weight: 800; line-height: .9; letter-spacing: -.04em; z-index: -2; user-select: none; }
.ambient-rings { position: absolute; inset: 0; overflow: hidden; z-index: -2; pointer-events: none; }
.ambient-rings i { position: absolute; left: 50%; top: 52%; width: 85%; height: 60%; border: 1px solid #efb6d11c; border-radius: 50%; transform: translate(-50%, -50%) rotate(-18deg); }
.ambient-rings i:nth-child(2) { width: 110%; height: 85%; transform: translate(-50%, -50%) rotate(14deg); border-color: #c3a8f71c; }
.ambient-rings i:nth-child(3) { width: 65%; height: 86%; transform: translate(-50%, -50%) rotate(64deg); border-color: #d7b4df0e; }
.hero-caption { position: absolute; left: var(--edge); top: 40px; font-size: 12px; line-height: 1.65; color: #e0c6db; }
.hero-caption strong { display: inline-block; font-size: 20px; color: var(--pearl); font-weight: 800; letter-spacing: -.025em; }
.broadcast { position: absolute; top: 44px; right: var(--edge); display: flex; gap: 9px; align-items: center; color: #e2c9e5; font-size: 9px; font-weight: 700; letter-spacing: .09em; }
.broadcast span { width: 6px; height: 6px; background: #ff91b3; border-radius: 50%; }
.stage-coordinate { position: absolute; left: 24px; top: 50%; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); font-size: 9px; letter-spacing: .13em; line-height: 1.8; color: #bca1c3; }

/* The three subjects share one composition, rather than separate viewport offsets. */
.hero-composition { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.75fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 2.7vw, 56px); width: 100%; max-width: 1800px; margin: 0 auto; z-index: 2; }
.logo-wrap { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; position: relative; z-index: 3; padding: 0; }
.brand-title { width: 112%; max-width: 980px; margin: -16px -6% 0; font-size: inherit; line-height: 0; }
.brand-title { position: relative; --logo-lift: -10px; --logo-tilt: 1.4deg; transform-origin: 50% 60%; }
.show-logo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; filter: drop-shadow(0 24px 28px #13081e5c); }
.logo-motion { position: absolute; inset: 0; display: none; pointer-events: none; filter: drop-shadow(0 24px 28px #13081e5c); }
.brand-title.motion-ready .show-logo { visibility: hidden; }
.brand-title.motion-ready .logo-motion { display: block; }
.apply-label { position: relative; display: inline-block; }
.apply-label-motion { display: none; position: absolute; inset: -7px -7px; pointer-events: none; }
.apply-label.motion-ready .apply-label-static { visibility: hidden; }
.apply-label.motion-ready .apply-label-motion { display: block; }
.apply-icon-motion { position: absolute; inset: -3px; display: none; pointer-events: none; }
.hero-apply-icon { position: relative; }
.hero-apply-icon.motion-ready>.ui-icon { visibility: hidden; }
.hero-apply-icon.motion-ready .apply-icon-motion { display: block; }
@media (prefers-reduced-motion: reduce) {
  .brand-title.motion-ready .show-logo, .apply-label.motion-ready .apply-label-static,
  .hero-apply-icon.motion-ready>.ui-icon { visibility: visible; }
  .brand-title.motion-ready .logo-motion, .apply-label.motion-ready .apply-label-motion,
  .hero-apply-icon.motion-ready .apply-icon-motion { display: none; }
}
.logo-signature.hero-apply { position: relative; display: inline-flex; gap: 24px; align-items: center; justify-content: space-between; min-height: 72px; min-width: 286px; padding: 10px 13px 10px 29px; margin-top: 24px; border-radius: 16px; color: #44223f; background: linear-gradient(120deg, #fff3e2, #ffd1df 58%, #d4b4f1); box-shadow: inset 0 2px 1px #fff9, inset 0 -3px 2px #9a5f9b4a, 0 16px 32px #140a256b; font-size: 18px; font-weight: 800; letter-spacing: -.015em; transition: transform .45s var(--ease), box-shadow .45s var(--ease); overflow: hidden; }
.hero-apply:hover { transform: translateY(-4px); box-shadow: inset 0 2px 1px #fff9, inset 0 -3px 2px #9a5f9b4a, 0 22px 40px #140a2580; }
.hero-apply:active { transform: translateY(1px) scale(.985); }
.hero-apply:focus-visible { outline: 3px solid #fff3e8; outline-offset: 7px; }
.hero-apply-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; color: #603359; background: linear-gradient(140deg, #fff6ee, #e6b0d6); box-shadow: inset 0 1px 2px #fff, inset 0 -2px 3px #a66a9f4a, 0 4px 8px #854f9026; transition: transform .5s var(--ease); }
.hero-apply-icon .ui-icon { width: 25px; height: 25px; stroke-width: 1.8; }
.logo-question { margin: 18px 0 0; color: #dec4db; font-size: 12px; font-weight: 500; letter-spacing: .025em; }

/* Story frames are the visual signature: warm edge, photograph, dark ink underneath. */
.reel { --angle: -9deg; position: relative; width: 100%; max-width: 308px; aspect-ratio: 2 / 3.15; justify-self: center; border-radius: 16px; padding: 5px; background: linear-gradient(145deg, #ffdfb9 0%, #f6a4b6 27%, #af7db9 65%, #6b457c); box-shadow: 12px 32px 54px #10071973; transform: rotate(var(--angle)); transition: transform .75s var(--ease), box-shadow .75s var(--ease); }
.reel-right { --angle: 9deg; transform: translateY(22px) rotate(var(--angle)); background: linear-gradient(145deg, #f4d4ef, #c095dc 35%, #9b62a1 70%, #67456f); }
.reel::before { content: ''; position: absolute; inset: 8px -7px -9px 7px; z-index: -1; border-radius: 16px; background: linear-gradient(145deg, #b97eaa52, #4a2b5566); border: 1px solid #f6d4ef30; }
.reel::after { content: ''; position: absolute; inset: 5px; border-radius: 12px; pointer-events: none; background: linear-gradient(112deg, #fff0 10%, #ffefe911 45%, #fff0 61%); }
.portrait { position: absolute; inset: 5px; border-radius: 12px; background-size: cover; overflow: hidden; }
.portrait-left { background-image: url('creator-style-iphone17.webp'); background-position: 50% 36%; }
.portrait-right { background-image: url('creator-music.webp'); background-position: 50% 30%; }
.portrait::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #1c102ec4 0%, #1c102e33 20%, transparent 36%, #1b102e66 64%, #1b102ee8 100%); }
.reel-progress { position: absolute; z-index: 1; display: flex; gap: 4px; top: 15px; left: 15px; right: 15px; }
.reel-progress i { height: 2px; flex: 1; background: #fff5; border-radius: 2px; overflow: hidden; }
.reel-progress i:first-child { background: #fff4e7; }
.reel-top { position: absolute; top: 29px; left: 17px; right: 17px; z-index: 1; display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 700; text-shadow: 0 2px 8px #22102d99; }
.reel-top>span:last-child { margin-left: auto; letter-spacing: 1px; }
.mini-avatar { display: grid; place-items: center; width: 25px; height: 25px; flex-shrink: 0; border-radius: 50%; color: #6e416c; background: #ffe8da; box-shadow: 0 0 0 1px #fff6; }
.mini-avatar .ui-icon { width: 14px; height: 14px; }
.insta-motion { display: inline-flex; align-items: center; justify-content: center; }
.reel-bottom { position: absolute; z-index: 1; bottom: 24px; left: 22px; right: 18px; }
.pill { display: inline-block; padding: 6px 9px; border: 1px solid #fff6; border-radius: 20px; font-size: 8px; font-weight: 700; letter-spacing: .055em; background: #25152f88; color: #fff5ed; }
.reel-bottom p { color: #fff8ef; font-weight: 800; font-size: clamp(22px, 2.1vw, 34px); line-height: 1.06; letter-spacing: -.035em; margin: 12px 0 18px; text-shadow: 0 2px 10px #190c2b40; }
.reel-social { display: flex; gap: 14px; color: #fff0ec; }
.reel-social .ui-icon { width: 19px; height: 19px; }
.reel-label { position: absolute; bottom: -30px; left: 4px; font-size: 9px; letter-spacing: .14em; color: #cbb2ce; }
.stela-story .portrait-left { background-image: url('stela-story-1.jpg'); background-position: 50% 40%; }
.stela-story .portrait-right { background-image: url('stela-story-6.jpg'); background-position: 50% 40%; }
.story-motion { position: absolute; inset: 5px; border-radius: 12px; overflow: hidden; display: none; pointer-events: none; }
.story-motion::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,#21122955,transparent 27%,transparent 77%,#21122966); pointer-events: none; }
.stela-story.motion-ready .story-motion { display: block; }
.stela-story.motion-ready .portrait, .stela-story.motion-ready .reel-progress { visibility: hidden; }
.stela-story .mini-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.stela-story .reel-top { pointer-events: none; }
.stela-story .reel-top .story-username { display: inline; margin-left: 0; letter-spacing: 0; }
.stela-story .reel-bottom { pointer-events: none; bottom: 20px; }
.stela-story .stela-profile { display: block; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.stela-profile:hover { color: #fff3e8; text-decoration: underline; text-underline-offset: 4px; }
.stela-profile:focus-visible { outline: 2px solid #fff3e8; outline-offset: 5px; border-radius: 3px; }
.story-nav { display: none; position: absolute; top: 50px; bottom: 40px; width: 50%; z-index: 2; border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: 10px; }
.motion-ready .story-nav { display: block; }
.story-prev { left: 0; }
.story-next { right: 0; }
.story-nav:focus-visible { outline: 2px solid #fff3e8; outline-offset: -8px; background: #ffffff12; }
@media (max-width: 1100px) { .story-motion { inset: 3px; } }
@media (max-width: 760px) { .stela-story .stela-profile { bottom: -25px; font-size: 11px; } }
.floating-like { position: absolute; z-index: 3; left: 21%; bottom: 65px; display: flex; align-items: center; gap: 10px; border-radius: 100px; padding: 13px 20px; background: linear-gradient(125deg, #fff4e7, #e3bee4); color: #a24178; box-shadow: 0 10px 24px #11091e50, inset 0 1px 1px #fff; transform: rotate(-8deg); }
.floating-like .ui-icon { width: 23px; height: 23px; fill: #eba4c344; stroke-width: 1.8; }
.floating-like b { font-size: 11px; font-weight: 700; }
.hand-note { position: absolute; right: 18%; bottom: 80px; display: flex; align-items: center; color: #e7c0e1; font-size: 13px; font-style: italic; transform: rotate(7deg); }
.hand-note .ui-icon { width: 15px; height: 15px; margin-left: 5px; }
.stage-bottom { position: absolute; bottom: 24px; left: var(--edge); right: var(--edge); display: flex; justify-content: space-between; gap: 20px; align-items: center; font-size: 9px; line-height: 1.5; letter-spacing: .07em; color: #c0a5c5; }
.record-label { display: inline-flex; align-items: center; gap: 7px; }
.record-label i { width: 5px; height: 5px; border-radius: 50%; background: #eea5c1; }

/* Quiet social motion stays behind the subjects. */
.social-dust { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: paint; }
.social-chip { position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); color: var(--tone); opacity: var(--alpha); display: flex; align-items: center; justify-content: center; animation: social-drift var(--duration) linear infinite; animation-delay: var(--delay); }
.social-chip .ui-icon { width: 100%; height: 100%; stroke-width: 1.35; }
.social-chip.social-pill { width: auto; height: auto; gap: 7px; padding: 9px 13px; border: 1px solid currentColor; border-radius: 100px; font-size: 9px; letter-spacing: .06em; }
.social-pill .ui-icon { width: 17px; height: 17px; }
@keyframes social-drift { 0% { transform: translate3d(0, 130px, 0) rotate(var(--tilt)); opacity: 0; } 15%, 80% { opacity: var(--alpha); } 100% { transform: translate3d(var(--drift), -220px, 0) rotate(calc(var(--tilt) + 20deg)); opacity: 0; } }
@keyframes premiere-arrival { from { opacity: .35; translate: 0 24px; filter: blur(5px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-composition { animation: premiere-arrival 1.2s var(--ease) both; }
}
.hero-stage.motion-paused *, .hero-stage.motion-paused *::before,
.hero-stage.motion-paused *::after { animation-play-state: paused !important; }
@media (hover: hover) and (pointer: fine) {
  .reel:hover { transform: translateY(-9px) rotate(calc(var(--angle) * .45)); box-shadow: 14px 42px 64px #10071990; }
}

@media (min-width: 1101px) and (max-height: 760px) {
  .hero-stage { min-height: 620px; padding-block: 92px 86px; }
  .hero-composition { max-width: 1480px; }
  .brand-title { max-width: 690px; }
  .reel { max-width: 235px; }
  .hero-apply { margin-top: 12px !important; }
  .floating-like { bottom: 38px; }
  .hand-note { bottom: 45px; }
  .stage-bottom { bottom: 15px; }
}
@media (max-width: 1100px) {
  .hero-stage { --edge: 32px; padding: 110px var(--edge) 95px; }
  .hero-composition { grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 1fr); gap: 18px; }
  .reel { padding: 3px; aspect-ratio: 1 / 1.75; }
  .portrait, .reel::after { inset: 3px; }
  .reel-top { font-size: 8px; left: 11px; right: 11px; gap: 5px; }
  .mini-avatar { width: 20px; height: 20px; }
  .reel-bottom { left: 12px; right: 10px; bottom: 16px; }
  .reel-bottom p { font-size: clamp(17px, 2.25vw, 25px); margin-bottom: 12px; }
  .pill { padding: 4px 6px; font-size: 6px; }
  .reel-social { gap: 10px; }
  .reel-social .ui-icon { width: 15px; height: 15px; }
  .reel-label { font-size: 7px; }
  .logo-signature.hero-apply { min-width: 240px; min-height: 62px; font-size: 16px; padding-left: 23px; gap: 15px; margin-top: 12px; }
  .hero-apply-icon { width: 39px; height: 39px; }
  .logo-question { font-size: 11px; margin-top: 14px; }
  .hero-caption { font-size: 11px; }
  .hero-caption strong { font-size: 18px; }
  .stage-coordinate { display: none; }
  .floating-like { left: 12%; }
  .hand-note { right: 10%; }
}
@media (max-width: 1700px) {
  .hero-stage .stage-coordinate { display: none; }
}
@media (max-width: 760px) {
  .brand-title { --logo-lift: -5px; --logo-tilt: .6deg; }
  .hero-stage { --edge: 24px; min-height: max(760px, 100svh); padding: 104px var(--edge) 90px; }
  .hero-composition { width: min(100%, 580px); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 34px; align-content: center; }
  .logo-wrap { grid-column: 1 / -1; grid-row: 1; }
  .brand-title { width: 110%; max-width: 540px; margin: -18px -5% 0; }
  .logo-signature.hero-apply { min-width: 256px; min-height: 60px; margin-top: 10px; }
  .logo-question { margin-top: 12px; }
  .reel { grid-row: 2; max-width: 215px; width: 100%; aspect-ratio: 2 / 2.85; --angle: -7deg; }
  .reel-right { --angle: 7deg; transform: translateY(0) rotate(var(--angle)); }
  .reel-label { display: none; }
  .reel-top { font-size: 8px; }
  .reel-bottom p { font-size: clamp(17px, 4.6vw, 25px); }
  .hero-caption { top: 24px; font-size: 10px; }
  .hero-caption strong { font-size: 17px; }
  .broadcast { top: 28px; font-size: 7px; letter-spacing: .035em; gap: 5px; }
  .broadcast span { width: 5px; height: 5px; }
  .backtype { font-size: 47vw; top: 40%; }
  .ambient-rings i { width: 145%; height: 45%; }
  .ambient-rings i:nth-child(2) { width: 195%; height: 60%; }
  .ambient-rings i:nth-child(3) { display: none; }
  .floating-like { display: none; }
  .hand-note { display: none; }
  .stage-bottom { font-size: 7px; bottom: 20px; gap: 16px; }
  .stage-bottom>span:last-child { max-width: 145px; text-align: right; }
  .social-chip { left: var(--mobile-x, var(--x)); top: var(--mobile-y, var(--y)); width: calc(var(--size) * .7); height: calc(var(--size) * .7); }
  .social-chip:nth-child(n+9) { display: none; }
  .social-chip.social-pill { font-size: 7px; padding: 6px 9px; }
  .social-pill .ui-icon { width: 13px; height: 13px; }
}
@media (max-width: 480px) {
  .hero-stage { --edge: 23px; min-height: max(710px, 100svh); padding-top: 86px; padding-bottom: 64px; }
  .hero-composition { gap: 33px 25px; }
  .brand-title { width: 116%; margin: -10px -8% 0; }
  .logo-signature.hero-apply { min-width: 244px; min-height: 60px; margin-top: 8px; }
  .reel { aspect-ratio: 2 / 3; }
  .reel-top { top: 22px; font-size: 6px; gap: 4px; }
  .reel-progress { left: 10px; right: 10px; top: 11px; }
  .mini-avatar { width: 17px; height: 17px; }
  .mini-avatar .ui-icon { width: 10px; height: 10px; }
  .reel-bottom { left: 11px; bottom: 14px; }
  .reel-bottom p { font-size: clamp(17px, 4.7vw, 22px); margin: 8px 0 10px; }
  .pill { font-size: 5px; padding: 4px 5px; }
  .reel-social { gap: 10px; }
  .reel-social .ui-icon { width: 14px; height: 14px; }
  .hero-caption { top: 22px; font-size: 9px; }
  .hero-caption strong { font-size: 15px; }
  .broadcast { top: 26px; font-size: 6px; }
  .logo-question { font-size: 10px; margin-top: 12px; }
  .stage-bottom { font-size: 6px; letter-spacing: .035em; }
}
@media (max-width: 360px) {
  .hero-stage { --edge: 20px; min-height: max(670px, 100svh); }
  .hero-composition { gap: 29px 20px; }
  .logo-signature.hero-apply { min-width: 226px; }
  .reel-bottom p { font-size: 16px; }
  .broadcast { font-size: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .social-chip { transform: rotate(var(--tilt)); opacity: calc(var(--alpha) * .7); }
  .logo-sheen, .hero-apply::after { display: none; }
  .brand-title, .hero-apply, .hero-apply-icon, .hero-apply-icon .ui-icon { transform: none !important; scale: none !important; }
}

/* Small editorial details stay readable at every shipped size. */
.hero-stage .hero-caption, .hero-stage .broadcast, .reel .reel-top,
.reel .pill, .reel .reel-label, .hero-stage .stage-coordinate,
.logo-wrap .logo-question, .stage-bottom .record-label { font-size: 11px; }
.hero-stage .stage-coordinate { color: #d8bbde; }
.hero-stage .floating-like { color: #7d2c60; }
.stage-bottom { font-size: 10px; color: #d8bbde; }
.reel .pill { letter-spacing: .02em; }
@media (max-width: 1100px) {
  .reel .reel-top { gap: 4px; }
  .reel-top>span:last-child { display: none; }
  .reel .pill { padding: 0; border: 0; background: none; letter-spacing: 0; }
}
@media (max-width: 760px) {
  .hero-stage .broadcast { display: none; }
  .stage-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; bottom: 17px; line-height: 1.4; }
  .stage-bottom>span:last-child { max-width: none; }
  .stage-bottom .record-label { align-items: flex-start; }
  .record-label i { flex-shrink: 0; margin-top: 5px; }
}