/* The reference's short-film rhythm, rebuilt in HTML with VideoShark branding. */
.shark-reel { position: relative; container-type: inline-size; background: #090b12; color: #f7f8ff; border: 1px solid #8aa2ff30; border-radius: clamp(15px,2vw,28px); overflow: hidden; box-shadow: 0 25px 85px -45px #5b7cff70; }
.reel-stage { position: relative; aspect-ratio: 16/9; overflow: hidden; isolation: isolate; }
.reel-atmosphere { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 68% 7%,#315aff38,transparent 50%),radial-gradient(ellipse at 8% 90%,#12244960,transparent 45%),#090b12; }
.reel-atmosphere::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(#9db6ff07 1px,transparent 1px),linear-gradient(90deg,#9db6ff07 1px,transparent 1px); background-size: 6cqw 6cqw; mask-image: linear-gradient(transparent,#0007,transparent); }
.reel-brand { position: absolute; z-index: 5; top: 6.5%; left: 5.5%; width: 17cqw; height: auto; transition: opacity .4s; filter: none; }
.shark-reel[data-scene="result"] .reel-brand,.shark-reel[data-scene="styles"] .reel-brand,.shark-reel[data-scene="mosaic"] .reel-brand,.shark-reel[data-scene="manifesto"] .reel-brand { opacity: 0; }
.reel-scene { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.reel-scene.is-active { opacity: 1; pointer-events: auto; z-index: 2; }
.shark-reel h2 { margin: 0; font-family: var(--font-display); font-size: 5.1cqw; font-weight: 800; line-height: 1.04; letter-spacing: -.045em; color: #f8f9ff; }
.shark-reel h2 em { font-style: normal; color: #8aa2ff; }
.reel-copy { position: absolute; z-index: 2; top: 38%; left: 5.5%; width: 35%; }
.reel-copy>p { color: #b3bacb; font-size: 2.05cqw; line-height: 1.4; margin: 2cqw 0 0; }
.reel-compose.is-active .reel-copy { animation: reel-copy-in .8s both; }
.reel-window,.reel-invite-composer { position: absolute; left: 39%; top: 34%; width: 56%; border: 1px solid #9bb4ff24; border-radius: 1.7cqw; background: #11141c; box-shadow: 0 1.7cqw 7cqw -2cqw #000b,0 0 4cqw #5b7cff0e; overflow: hidden; }
.reel-window { transition: top .75s cubic-bezier(.2,.8,.2,1),box-shadow .8s; }
.reel-window-bar { display: flex; align-items: center; gap: .8cqw; height: 4cqw; padding: 0 1.6cqw; color: #d9deeb; border-bottom: 1px solid #ffffff0c; font-size: 1.25cqw; }
.reel-window-bar b { font-weight: 550; }
.reel-window-dots { color: #3c414b; font-size: .8cqw; letter-spacing: .15cqw; }
.reel-job-status { margin-left: auto; font-size: .9cqw; color: #9aaeea; }
.reel-composer-body { padding: 1.6cqw; }
.reel-prompt { margin: 0; height: 5.6cqw; font-size: 1.65cqw; color: #e9ecf6; line-height: 1.5; }
.reel-caret { display: inline-block; height: 1.5cqw; width: .14cqw; background: #8aa2ff; vertical-align: -.18cqw; animation: reel-caret 1s step-end infinite; }
.reel-options { display: flex; align-items: center; gap: .5cqw; font-size: 1.02cqw; color: #a8b0c1; }
.reel-options>span { padding: .5cqw .9cqw; border: 1px solid #ffffff0b; border-radius: 2cqw; }
.reel-options>span.selected { color: #a7bbff; background: #5b7cff22; border-color: transparent; }
.reel-send { margin-left: auto; display: grid; place-items: center; width: 3.2cqw; height: 3.2cqw; background: #5b7cff; color: #08102a; font-size: 2cqw; font-weight: 500; border-radius: 50%; box-shadow: 0 0 2cqw #5b7cff33; }
.reel-generation { position: relative; height: 0; opacity: 0; overflow: hidden; background: #070c16; transition: height .75s cubic-bezier(.2,.8,.2,1),opacity .5s; }
.reel-generation-image { position: absolute; inset: -10%; background: url('/showcase/5de6c0a6-2594-430e-a3f6-c10d253c2740.webp') center/cover; filter: blur(1.6cqw) brightness(.4); transform: scale(1.12); }
.reel-generating { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); white-space: nowrap; display: flex; gap: .7cqw; align-items: center; background: #07101bd9; border: 1px solid #ffffff18; padding: .7cqw 1.1cqw; border-radius: 3cqw; font-size: 1.02cqw; }
.reel-generating i { height: 1.15cqw; width: 1.15cqw; border: 2px solid #8aa2ff35; border-top-color: #8aa2ff; border-radius: 50%; animation: reel-spin 1.1s linear infinite; }
.reel-generation-progress { position: absolute; bottom: 0; left: 0; width: var(--generation-progress,0%); height: .22cqw; background: #8aa2ff; box-shadow: 0 0 1cqw #5b7cff; }
.shark-reel[data-scene="generating"] .reel-window { top: 12%; box-shadow: 0 0 5cqw #5b7cff18; }
.shark-reel[data-scene="generating"] .reel-generation { height: 26cqw; opacity: 1; }
.reel-result video { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.02 + var(--scene-progress,0) * .045)); }
.reel-result-shade { position: absolute; inset: 0; background: linear-gradient(0deg,#020814a8,transparent 70%); }
.reel-result h2 { position: absolute; left: 5.5%; bottom: 12%; font-size: 6.4cqw; }
.reel-result-tags { position: absolute; top: 7%; left: 5.5%; display: flex; gap: .8cqw; font: 1.1cqw var(--mono); }
.reel-result-tags>span { background: #06121eb8; border: 1px solid #ffffff20; padding: .65cqw 1cqw; border-radius: .6cqw; backdrop-filter: blur(10px); }
.reel-result-tags>span:first-child { color: #9bb5ff; }
.reel-result-tags i { display: inline-block; height: .4cqw; width: .4cqw; border-radius: 50%; background: #8aa2ff; margin-right: .4cqw; }
.reel-mosaic-wall,.reel-final-wall { position: absolute; display: grid; gap: 1cqw; grid-template-columns: repeat(4,1fr); }
.reel-mosaic-wall { inset: -15% -9%; transform: perspective(90cqw) rotateX(10deg) rotateZ(-8deg) scale(calc(1.01 + var(--scene-progress,0) * .12)); }
.reel-mosaic-wall img,.reel-final-wall img { width: 100%; height: 16cqw; object-fit: cover; border-radius: .7cqw; border: 1px solid #9db5ff55; box-shadow: 0 1cqw 2cqw #0007; }
.reel-mosaic-wall img:nth-child(3n) { border-color: #81c6ff77; }
.reel-mosaic-shade { position: absolute; inset: 0; background: linear-gradient(10deg,#040714 5%,#04071470 52%,transparent); }
.reel-mosaic h2 { position: absolute; bottom: 12%; left: 5.5%; font-size: 6.5cqw; text-shadow: 0 .2cqw 3cqw #000; }
.reel-styles { background: radial-gradient(ellipse at 70% 8%,#dde4ff,transparent 55%),radial-gradient(ellipse at 20% 100%,#e5eaff,transparent 60%),#f8f9f3; }
.reel-style-copy { position: absolute; top: 36%; left: 5.5%; z-index: 2; width: 42%; }
.reel-styles h2 { color: #101725; font-size: 4.7cqw; }
.reel-styles h2 em { color: #4963cf; }
.reel-style-copy p { font: .75cqw var(--mono); color: #647086; letter-spacing: .12cqw; margin-top: 2.2cqw; }
.reel-style-cards { position: absolute; left: 49%; top: 18%; width: 46%; height: 65%; display: flex; gap: 1.2cqw; align-items: center; perspective: 80cqw; }
.reel-style-cards figure { position: relative; margin: 0; width: 33.333%; height: 80%; border-radius: 1.6cqw; overflow: hidden; box-shadow: 0 2cqw 2.5cqw #20335435; border: 1px solid #fff; transform: rotate(-8deg) translateY(-1.3cqw); }
.reel-style-cards figure:nth-child(2) { transform: rotate(3deg) translateY(1.2cqw); }
.reel-style-cards figure:nth-child(3) { transform: rotate(9deg) translateY(-1.4cqw); }
.reel-style-cards img { height: 100%; width: 100%; object-fit: cover; }
.reel-style-cards figcaption { position: absolute; inset: auto 0 0; color: white; background: linear-gradient(transparent,#06111fe0); padding: 3cqw .7cqw .8cqw; font: .72cqw var(--mono); }
.reel-style-cards figcaption span { color: #c3cfff; }
.reel-styles.is-active .reel-style-cards figure { animation: reel-card-arrive .7s both; }
.reel-styles.is-active .reel-style-cards figure:nth-child(2) { animation-delay: .12s; }
.reel-styles.is-active .reel-style-cards figure:nth-child(3) { animation-delay: .24s; }
.reel-formats .reel-copy { top: 34%; }
.reel-ratios { display: flex; gap: .25cqw; margin-top: 2.6cqw; font: .85cqw var(--mono); }
.reel-ratios span { padding: .55cqw .6cqw; border-radius: 2cqw; color: #a2aabd; }
.reel-ratios span.active { color: #09112a; background: #8aa2ff; }
.reel-format-area { position: absolute; left: 40%; top: 12%; width: 55%; height: 76%; display: grid; place-items: center; }
.reel-format-card { margin: 0; position: relative; height: 100%; width: 43.75%; overflow: hidden; border-radius: 1.3cqw; border: 1px solid #ffffff20; box-shadow: 0 1.6cqw 3.5cqw #0008; transition: width .45s cubic-bezier(.2,.75,.25,1),height .45s cubic-bezier(.2,.75,.25,1); }
.reel-format-card[data-format="3:4"] { width: 58.3%; height: 100%; }
.reel-format-card[data-format="1:1"] { width: 69%; height: 89%; }
.reel-format-card[data-format="4:3"] { width: 88%; height: 85%; }
.reel-format-card[data-format="16:9"] { width: 100%; height: 72.4%; }
.reel-format-card[data-format="21:9"] { width: 100%; height: 55.2%; }
.reel-format-card img { width: 100%; height: 100%; object-fit: cover; }
.reel-format-card figcaption { position: absolute; left: 1cqw; bottom: 1cqw; border: 1px solid #ffffff25; color: white; background: #060c16aa; padding: .5cqw .7cqw; border-radius: .5cqw; font: .85cqw var(--mono); }
.reel-final-wall { top: -28%; left: 33%; right: -18%; bottom: -30%; transform: rotate(-17deg) translateY(calc(var(--scene-progress,0) * -5cqw)); }
.reel-final-wall img { height: 19cqw; }
.reel-final-shade { position: absolute; inset: 0; background: linear-gradient(90deg,#050914fa 8%,#050914a8 57%,#05091422),linear-gradient(0deg,#05091499,transparent); }
.reel-manifesto h2 { position: absolute; top: 38%; left: 5.5%; font-size: 6cqw; }
.reel-invite .reel-copy { top: 35%; }
.reel-invite h2 { font-size: 4.6cqw; }
.reel-invite-composer { top: 32%; color: inherit; transition: border-color .2s,box-shadow .2s; }
.reel-invite-composer:hover { border-color: #8aa2ff80; box-shadow: 0 0 3cqw #5b7cff35; }
.reel-invite-composer .reel-prompt { color: #7b859c; }
.reel-invite-composer .reel-send { animation: reel-send-glow 1.5s ease-in-out infinite; }
.reel-demo-note { position: absolute; z-index: 6; bottom: 3%; left: 5.5%; color: #b9c7e78a; font: .65cqw var(--mono); letter-spacing: .13cqw; pointer-events: none; }
.shark-reel[data-scene="styles"] .reel-demo-note { color: #63708d; }
.reel-controls { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 5px 18px 5px 24px; min-height: 46px; border-top: 1px solid #ffffff0c; background: #0b0e16; }
.reel-control-label { font: 9px var(--mono); letter-spacing: .08em; color: #9daac4; white-space: nowrap; }
.reel-control-label>span { color: #616f88; }
.reel-chapters { display: flex; flex: 1; justify-content: center; max-width: 310px; gap: 5px; }
.reel-chapters button { position: relative; min-width: 20px; width: 34px; height: 32px; padding: 10px 0; border: 0; cursor: pointer; background: transparent; }
.reel-chapters button::before,.reel-chapters button i { content: ''; position: absolute; left: 0; right: 0; top: 15px; height: 3px; background: #2a3142; border-radius: 5px; }
.reel-chapters button i { right: auto; width: var(--chapter-progress,0%); background: #748fff; }
.reel-chapters button[aria-pressed="true"]::before { background: #748fff70; }
.reel-chapters button:hover::before { background: #a6b8ff; }
.shark-reel:not(.is-running) *,.shark-reel:not(.is-running) *::before,.shark-reel:not(.is-running) *::after { animation-play-state: paused !important; }
.shark-reel.is-paused .reel-copy,.shark-reel.is-paused .reel-style-cards figure { animation: none; }
.shark-reel.is-paused .reel-scene,.shark-reel.is-paused .reel-window,.shark-reel.is-paused .reel-generation,.shark-reel.is-paused .reel-format-card { transition: none; }
.reel-no-script { color: #8aa2ff; font-size: 13px; text-align: right; }
@keyframes reel-copy-in { from { opacity: 0; translate: 0 1.5cqw; } to { opacity: 1; translate: 0 0; } }
@keyframes reel-card-arrive { from { opacity: 0; translate: 3cqw 2cqw; } to { opacity: 1; translate: 0 0; } }
@keyframes reel-caret { 50% { opacity: 0; } }
@keyframes reel-spin { to { rotate: 1turn; } }
@keyframes reel-send-glow { 50% { box-shadow: 0 0 2.5cqw #5b7cff80; } }
@media(max-width:600px) {
  .shark-reel { border-radius: 16px; }
  .reel-stage { aspect-ratio: 4/3; }
  .reel-brand { width: 25cqw; }
  .shark-reel h2 { font-size: 5.6cqw; }
  .reel-copy>p { font-size: 2.8cqw; }
  .reel-window,.reel-invite-composer { width: 54%; left: 42%; top: 35%; border-radius: 2cqw; }
  .reel-window-bar { height: 5.5cqw; font-size: 1.8cqw; }
  .reel-window-dots { font-size: 1.1cqw; }
  .reel-job-status { font-size: 1.4cqw; }
  .reel-composer-body { padding: 2.2cqw; }
  .reel-prompt { font-size: 2.2cqw; height: 8.5cqw; }
  .reel-options { font-size: 1.45cqw; }
  .reel-options>span { padding: .6cqw .8cqw; }
  .reel-send { width: 4.4cqw; height: 4.4cqw; font-size: 2.8cqw; }
  .reel-caret { height: 2cqw; width: .3cqw; }
  .shark-reel[data-scene="generating"] .reel-window { top: 21%; }
  .shark-reel[data-scene="generating"] .reel-generation { height: 30cqw; }
  .reel-generating { font-size: 1.8cqw; padding: 1cqw 1.5cqw; }
  .reel-generating i { height: 2cqw; width: 2cqw; }
  .reel-result h2,.reel-mosaic h2 { font-size: 8.5cqw; bottom: 13%; }
  .reel-result-tags { font-size: 1.7cqw; }
  .reel-mosaic-wall { inset: -6% -13%; gap: 1.7cqw; }
  .reel-mosaic-wall img { height: 26cqw; }
  .reel-style-copy { top: 17%; width: 80%; }
  .reel-style-copy h2 br { display: none; }
  .reel-style-copy p { font-size: 1.3cqw; margin-top: 2cqw; }
  .reel-style-cards { top: 39%; left: 13%; width: 75%; height: 52%; gap: 3cqw; }
  .reel-style-cards figcaption { font-size: 1.2cqw; padding: 4cqw 1cqw 1cqw; }
  .reel-formats .reel-copy { top: 36%; }
  .reel-ratios { flex-wrap: wrap; width: 85%; gap: 1cqw; font-size: 1.5cqw; }
  .reel-format-area { top: 18%; height: 64%; }
  .reel-format-card { height: 100%; width: 49%; }
  .reel-format-card[data-format="3:4"] { width: 65.5%; }
  .reel-format-card[data-format="1:1"] { width: 78%; }
  .reel-format-card[data-format="4:3"] { width: 100%; }
  .reel-format-card[data-format="16:9"] { height: 64.5%; }
  .reel-format-card[data-format="21:9"] { height: 49%; }
  .reel-format-card figcaption { font-size: 1.45cqw; }
  .reel-manifesto h2 { top: 37%; font-size: 7cqw; }
  .reel-final-wall img { height: 25cqw; }
  .reel-invite h2 { font-size: 5cqw; }
  .reel-invite .reel-copy { top: 37%; }
  .reel-demo-note { font-size: 1.1cqw; bottom: 4%; }
  .reel-controls { gap: 8px; padding: 4px 10px; min-height: 44px; }
  .reel-control-label { display: none; }
  .reel-chapters { max-width: none; min-width: 0; }
  .reel-chapters button { flex: 1; width: auto; max-width: 34px; }
}
@media(prefers-reduced-motion:reduce) {
  .shark-reel * { animation: none !important; transition: none !important; }
  .reel-result video,.reel-mosaic-wall,.reel-final-wall { transform: none; }
}