/* Puhelinkehyksen video (pystyvideo omilla ohjaimilla). Skripti: assets/js/video-phone.js. Käytössä: tekoaly-videot, google-ads. */
.video-phone{position:relative;padding:9px;border-radius:48px;background:linear-gradient(150deg,#3a3f57 0%,#14172a 38%,#0b0d19 70%,#2b3048 100%);box-shadow:0 0 0 1px #ffffff1f inset,0 2px 0 #ffffff26 inset,0 40px 80px -20px rgba(35,46,102,.45),0 18px 36px -18px rgba(15,18,40,.55)}
.video-phone:before,.video-phone:after{content:'';position:absolute;width:3px;border-radius:3px;background:#1d2135}
.video-phone:before{left:-3px;top:20%;height:10%;box-shadow:0 60px 0 #1d2135}
.video-phone:after{right:-3px;top:27%;height:15%}
.video-phone-screen{position:relative;overflow:hidden;border-radius:39px;background:#111;isolation:isolate}
.video-phone-screen video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#111;cursor:pointer}
.video-phone-island{position:absolute;top:10px;left:50%;width:30%;height:22px;border-radius:20px;background:#05060c;transform:translateX(-50%);pointer-events:none;z-index:2}
.video-phone-big-play{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:68px;height:68px;padding:0;border:1px solid #ffffff4d;border-radius:50%;background:#ffffff2e;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;cursor:pointer;transform:translate(-50%,-50%);transition:opacity .25s ease,transform .25s ease,background .2s ease;z-index:2}
.video-phone [hidden]{display:none!important}
.video-phone-big-play svg{width:26px;height:26px;margin-left:3px;fill:currentColor}
.video-phone-big-play:hover,.video-phone-big-play:focus-visible{background:#ffffff47;transform:translate(-50%,-50%) scale(1.06)}
.video-phone-screen:not(.is-paused) .video-phone-big-play{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.85)}
.video-phone-overlay{position:absolute;inset:auto 0 0;padding:70px 18px 16px;background:linear-gradient(to top,rgba(5,6,14,.82) 0%,rgba(5,6,14,.45) 55%,transparent 100%);color:#fff;pointer-events:none;z-index:1}
.video-phone-caption{display:flex;flex-direction:column;gap:3px;font-size:.8rem;line-height:1.35;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.video-phone-caption strong{font-size:.92rem;font-weight:800}
.video-phone-caption span{opacity:.8}
.video-phone-controls{display:flex;align-items:center;gap:6px;margin:10px -6px 0;pointer-events:auto;transition:opacity .3s ease,transform .3s ease}
.video-phone-screen:not(.has-played) .video-phone-controls{display:none}
.video-phone-screen.is-idle .video-phone-controls{opacity:0;transform:translateY(6px)}
.video-phone-screen.is-idle video{cursor:none}
.video-phone-controls button{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer;transition:background .2s ease}
.video-phone-controls button:hover,.video-phone-controls button:focus-visible{background:#ffffff26}
.video-phone-controls svg{width:18px;height:18px;fill:currentColor}
.video-phone-controls [data-phone-mute] svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.video-phone-controls [data-phone-mute] svg path:first-child{fill:currentColor}
.video-phone-seek{--progress:0%;flex:1;min-width:0;height:18px;margin:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none}
.video-phone-seek::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,#fff var(--progress),#ffffff4d var(--progress))}
.video-phone-seek::-moz-range-track{height:3px;border-radius:3px;background:linear-gradient(to right,#fff var(--progress),#ffffff4d var(--progress))}
.video-phone-seek::-webkit-slider-thumb{width:11px;height:11px;margin-top:-4px;border:0;border-radius:50%;background:#fff;-webkit-appearance:none;appearance:none;transform:scale(0);transition:transform .15s ease}
.video-phone-seek::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:#fff;transform:scale(0);transition:transform .15s ease}
.video-phone-seek:hover::-webkit-slider-thumb,.video-phone-seek:focus-visible::-webkit-slider-thumb{transform:scale(1)}
.video-phone-seek:hover::-moz-range-thumb,.video-phone-seek:focus-visible::-moz-range-thumb{transform:scale(1)}
.video-phone-seek:focus-visible{outline:none}
.video-phone-seek:focus-visible::-webkit-slider-runnable-track{box-shadow:0 0 0 3px #ffffff59}
.video-phone button:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Pikapainikkeet (valinnaiset): ääni päälle keskellä, suurenna oikeassa yläkulmassa. Hiirellä näkyvät hoverilla. */
.video-phone-sound,.video-phone-expand{position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;border:1px solid #ffffff59;color:#fff;background:rgba(10,12,28,.42);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(5,6,14,.35);cursor:pointer;transition:opacity .25s ease,transform .25s ease,background .2s ease}
.video-phone-sound{top:57%;left:50%;gap:10px;padding:14px 24px 14px 20px;border-radius:999px;font:inherit;font-size:1rem;font-weight:800;white-space:nowrap;transform:translate(-50%,-50%)}
.video-phone-sound svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.video-phone-sound svg path:first-child{fill:currentColor}
.video-phone-expand{top:44px;right:14px;width:44px;height:44px;padding:0;border-radius:50%}
.video-phone-expand svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.video-phone-sound:hover,.video-phone-sound:focus-visible{background:rgba(10,12,28,.62);transform:translate(-50%,-50%) scale(1.05)}
.video-phone-expand:hover,.video-phone-expand:focus-visible{background:rgba(10,12,28,.62);transform:scale(1.08)}
.video-phone-screen.has-sound .video-phone-sound,.video-phone-screen.is-paused .video-phone-sound{display:none}
@media(hover:hover){.video-phone-sound,.video-phone-expand{opacity:0;pointer-events:none}.video-phone-screen:hover .video-phone-sound,.video-phone-screen:hover .video-phone-expand,.video-phone-screen:focus-within .video-phone-sound,.video-phone-screen:focus-within .video-phone-expand{opacity:1;pointer-events:auto}}
/* Suurennettu video (Teatteri): pystyvideo lähes mustalla taustalla, ei sumennusta. */
.video-phone-dialog{max-width:none;max-height:none;margin:auto;padding:0;border:0;background:transparent;overflow:visible}
.video-phone-dialog::backdrop{background:rgba(4,5,12,.96)}
.video-phone-dialog[open]{display:flex;align-items:center;gap:56px}
.video-phone-dialog video{display:block;height:min(90dvh,calc(92vw*16/9));width:auto;aspect-ratio:9/16;border-radius:30px;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 120px rgba(0,0,0,.7)}
.video-phone-dialog-close{position:fixed;top:18px;right:18px;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;transition:background .2s ease}
.video-phone-dialog-close:hover,.video-phone-dialog-close:focus-visible{background:rgba(255,255,255,.2)}
.video-phone-dialog-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

/* Sivuhuomio (valinnainen, data-phone-promo): toimituksellinen palsta liukuväriviivalla. Sivulla vaalea, dialogissa tumma. */
.video-phone-promo{margin-top:18px;padding:2px 0 2px 16px;border-left:3px solid transparent;border-image:var(--grad-v,linear-gradient(180deg,#fcb549,#e64644,#d823cd)) 1;font-size:14px;line-height:1.5;color:var(--text-muted,#6f6f6f);text-align:left}
.video-phone-promo-kicker{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#e64644}
.video-phone-promo-kicker svg{width:15px;height:15px;fill:#f58024}
.video-phone-promo strong{display:block;margin:6px 0 2px;font-size:15px;font-weight:800;line-height:1.3;color:var(--navy-dark,#232e66)}
.video-phone-promo p{margin:0}
.video-phone-promo-cta{display:inline-flex;align-items:center;gap:6px;margin-top:10px;color:var(--navy-dark,#232e66);font-weight:800;text-decoration:none}
.video-phone-promo-cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.video-phone-promo-cta:hover svg,.video-phone-promo-cta:focus-visible svg{transform:translateX(3px)}
.video-phone-dialog-aside{width:340px;flex:none}
.video-phone-dialog-aside .video-phone-promo{margin:0;padding:0 0 0 26px}
.video-phone-dialog-aside .video-phone-promo-kicker{background:var(--grad,linear-gradient(90deg,#fcb549,#e64644,#d823cd));-webkit-background-clip:text;background-clip:text;color:transparent}
.video-phone-dialog-aside .video-phone-promo strong{margin:14px 0 12px;font-size:30px;line-height:1.15;letter-spacing:-.02em;color:#fff}
.video-phone-dialog-aside .video-phone-promo p{font-size:17px;line-height:1.55;color:rgba(255,255,255,.72)}
.video-phone-dialog-aside .video-phone-promo-cta{margin-top:26px;padding:15px 26px;border-radius:999px;background:var(--grad,linear-gradient(90deg,#fcb549,#e64644,#d823cd));color:#fff;font-size:16px;white-space:nowrap;box-shadow:0 14px 34px -10px rgba(233,30,133,.6)}
@media(max-width:760px){.video-phone-dialog[open]{flex-direction:column;gap:14px}.video-phone-dialog video{height:min(74dvh,calc(92vw*16/9))}.video-phone-dialog-aside{width:min(92vw,420px)}.video-phone-dialog-aside .video-phone-promo{padding:0;border:0;text-align:center}.video-phone-dialog-aside .video-phone-promo strong{margin:6px 0 0;font-size:17px}.video-phone-dialog-aside .video-phone-promo p{display:none}.video-phone-dialog-aside .video-phone-promo-cta{margin-top:12px;padding:11px 20px;font-size:15px}}
.video-phone-promo-more{margin-top:12px!important;font-size:13px;color:var(--text-muted,#6f6f6f)}
.video-phone-promo-more a{color:var(--navy-dark,#232e66);font-weight:700;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.video-phone-dialog-aside .video-phone-promo-more{margin-top:22px!important;font-size:14px;color:rgba(255,255,255,.6)}
.video-phone-dialog-aside .video-phone-promo-more a{color:#fff}
@media(max-width:760px){.video-phone-dialog-aside .video-phone-promo-more{display:none}}
/* Videonosto: puhelin ja esittelyteksti rinnakkain (tekoaly-videot, referenssit) */
.video-phone-feature{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:center}
.video-phone-feature>figure{margin:0}
.video-phone-note{margin-top:24px;text-align:center;font-size:13.5px;line-height:1.5;color:var(--text-muted,#6f6f6f)}
.video-phone-note-more{display:block;margin-top:2px}
.video-phone-note-more a{display:inline-flex;align-items:center;gap:4px;color:var(--navy-dark,#232e66);font-weight:700;text-decoration:none;white-space:nowrap}
.video-phone-note-more a svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.video-phone-note-more a:hover svg,.video-phone-note-more a:focus-visible svg{transform:translateX(3px)}
@media(max-width:900px){.video-phone-feature{grid-template-columns:1fr}.video-phone-feature>figure{width:min(300px,78vw);margin:0 auto}}
@media(prefers-reduced-motion:reduce){.video-phone-promo-cta svg{transition:none}}
@media(prefers-reduced-motion:reduce){.video-phone-big-play,.video-phone-controls,.video-phone-sound,.video-phone-expand{transition:none}}