/* A product, three creative directions, one film. All artwork is native CSS/SVG. */
.idea-section{padding-bottom:70px}
.idea-light{opacity:.3;width:540px;height:360px;left:calc(50% - 650px);top:470px}
.idea-intro{max-width:1100px}
.idea-map{height:360px;max-width:1240px;margin:70px auto 38px}
.connection-track{stroke:#ffffff16;stroke-width:1}
.connection-draw{stroke:url(#idea-gradient);stroke-width:1.1}
.idea-connections path{vector-effect:non-scaling-stroke}
.connection-pulses{opacity:var(--map-progress);stroke:#ffe1be;stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 3px #eea56b70)}
.connection-pulse{stroke-dasharray:.09 1;stroke-dashoffset:.09;opacity:0;animation:idea-pulse-in 10.8s linear infinite;animation-delay:var(--route-delay,0s);animation-play-state:paused}
.connection-pulse--out{animation-name:idea-pulse-out}
.connection-pulse[data-step="2"],.idea-possibilities>div:nth-child(2){--route-delay:3.6s}
.connection-pulse[data-step="3"],.idea-possibilities>div:nth-child(3){--route-delay:7.2s}
.idea-map.motion-running .connection-pulse,.idea-map.motion-running .idea-possibilities>div,.idea-map.motion-running .reel-sheet{animation-play-state:running}
@keyframes idea-pulse-in{0%{stroke-dashoffset:.09;opacity:0}2%{opacity:.95}13%{stroke-dashoffset:-1;opacity:.95}15%,100%{stroke-dashoffset:-1;opacity:0}}
@keyframes idea-pulse-out{0%,21%{stroke-dashoffset:.09;opacity:0}23%{opacity:.95}32%{stroke-dashoffset:-1;opacity:.95}34%,100%{stroke-dashoffset:-1;opacity:0}}
.idea-origin,.idea-result{top:calc(50% - 70px);z-index:2}
.idea-origin{width:20%}
.product-visual{display:block;position:relative;width:180px;height:140px;margin:0 auto 9px}
.product-visual .idea-orb{position:absolute;width:76px;height:76px;margin:0;left:52px;top:32px;z-index:2;border-color:#f3bf8baa;background:radial-gradient(circle at 33% 25%,#ffe5bd 0%,#d28c55 15%,#8a4728 40%,#3d2016 63%,#0c0b0b 88%);box-shadow:inset -7px -10px 18px #0c0808,0 0 40px #df854017}
.product-orbit{position:absolute;left:0;top:0;width:180px;height:140px;transform:rotate(-27deg);transform-origin:90px 70px;pointer-events:none}
.product-orbit svg{display:block;width:180px;height:140px;stroke:#b48b665e;stroke-width:1;overflow:visible}
.product-orbit--back{z-index:1}
.product-orbit--front{z-index:3}
.product-orbit--front svg{stroke:#ecc092b3}
.orbit-satellite{position:absolute;left:0;top:0;width:9px;height:9px;offset-path:path('M 161.28 33.68 A 80 30 -27 1 1 18.72 106.32 A 80 30 -27 1 1 161.28 33.68');offset-rotate:0deg;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff2d8,#cf945d 38%,#54301e 80%);box-shadow:0 0 9px #f9b77b26;animation:product-orbit-travel 18s linear infinite;animation-play-state:paused}
.orbit-satellite--second{width:5px;height:5px;animation-delay:-9s;opacity:.85}
.idea-map.motion-running .orbit-satellite{animation-play-state:running}
@keyframes product-orbit-travel{0%{offset-distance:0%;z-index:4}49.9%{z-index:4}50%{z-index:1}100%{offset-distance:100%;z-index:1}}
.idea-origin strong{font-size:17px;font-weight:500;letter-spacing:-.025em}
.idea-origin small{margin-top:7px;font-size:12px;color:#a19b96}
.idea-possibilities{left:44%;width:30%;top:0;height:360px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(3,1fr);align-items:center;justify-content:stretch}
.idea-possibilities>div{min-height:58px;padding:16px 20px;gap:19px;border-radius:13px;border:1px solid #ffffff19;background:linear-gradient(120deg,#0a0a0bf7,#090909fc);box-shadow:0 6px 22px #0002;transform:translateY(calc((1 - var(--map-progress))*18px));opacity:calc(.35 + var(--map-progress)*.65);color:#d8d4cf;animation:idea-step-light 10.8s ease-in-out infinite;animation-delay:var(--route-delay,0s);animation-play-state:paused}
@keyframes idea-step-light{0%,10%,31%,100%{border-color:#ffffff19;box-shadow:0 6px 22px #0002;color:#d8d4cf}16%,21%{border-color:#d6a675b3;box-shadow:0 0 22px #d68e3d12,inset 0 0 25px #c78a4710;color:#fff7ec}}
.idea-possibilities span{font-size:10px;font-variant-numeric:tabular-nums;color:#d5a178}
.idea-possibilities svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.idea-possibilities strong{font-size:14px;letter-spacing:-.012em;white-space:nowrap}
.idea-result{width:18%;right:0}
.idea-reel{position:relative;display:block;width:110px;height:140px;margin:0 auto 9px;padding:0;isolation:isolate;cursor:pointer;border-radius:14px}
.reel-sheet{position:absolute;width:75px;height:122px;top:9px;left:17px;border:1px solid #a68f736b;border-radius:10px;background:#0a0909;transform-origin:50% 88%;transition:transform .7s cubic-bezier(.2,.7,.2,1),border-color .4s;animation:reel-auto-fan 7.8s cubic-bezier(.4,0,.2,1) infinite;animation-play-state:paused}
.reel-sheet--front{--fan-x:-3px;--fan-y:-5px;--fan-turn:-4deg}
.reel-sheet--middle{--fan-x:1px;--fan-y:-2px;--fan-turn:1deg}
.reel-sheet--back{--fan-x:5px;--fan-y:2px;--fan-turn:4deg}
@keyframes reel-auto-fan{0%,15%,100%{translate:0 0;rotate:0deg}48%,66%{translate:var(--fan-x) var(--fan-y);rotate:var(--fan-turn)}}
.reel-sheet--back{transform:translate(9px,5px) rotate(7deg);opacity:.65}
.reel-sheet--middle{transform:translate(4px,2px) rotate(3deg);opacity:.7}
.reel-sheet--front{border-color:#d2c8bc63;background:linear-gradient(145deg,#121212,#080809 60%);overflow:hidden;box-shadow:0 8px 25px #0004}
.reel-light{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
.reel-play-icon{position:absolute;left:50%;top:50%;width:23px;height:23px;transform:translate(-44%,-50%);stroke:#f5f0e9;fill:#07070885;stroke-width:1.3;stroke-linejoin:round}
.idea-reel:hover .reel-sheet--front,.idea-reel:focus-visible .reel-sheet--front{transform:translate(-3px,-5px) rotate(-4deg);border-color:#e7c39b}
.idea-reel:hover .reel-sheet--back,.idea-reel:focus-visible .reel-sheet--back{transform:translate(13px,7px) rotate(10deg)}
.idea-reel:focus-visible{outline:1px solid #e9b180;outline-offset:7px}
.idea-result strong{font-size:15px;letter-spacing:-.02em}
.idea-platforms{gap:18px;margin-top:18px}
.idea-platforms img{width:18px;height:18px;opacity:.65}
.production-flow{margin-top:38px;border-top-color:#ffffff16;padding-top:30px}
@media(min-width:601px) and (max-width:1000px){
 .idea-map{height:330px;margin-top:56px}
 .idea-possibilities{height:330px;left:36%;width:39%}
 .idea-possibilities>div{gap:12px;padding:15px 12px}
 .idea-possibilities strong{font-size:12px}
 .idea-possibilities svg{width:19px;height:19px}
 .product-visual{transform:scale(.8);transform-origin:50% 65%;margin-bottom:0;width:160px;left:calc(50% - 80px);margin-left:0}
 .idea-origin{width:20%}
 .idea-origin strong{font-size:15px}
 .idea-origin small{font-size:10px}
 .idea-result{width:20%}
 .idea-result strong{font-size:12px}
 .idea-platforms{gap:12px}
 .idea-platforms img{width:16px;height:16px}
}
@media(max-width:600px){
 .idea-section{padding-bottom:35px}
 .idea-map{display:grid;height:auto;min-height:740px;grid-template-columns:1fr;grid-template-rows:190px auto 210px;gap:45px;margin-top:30px;margin-bottom:28px}
 .idea-map:before{display:none}
 .idea-connections{display:block;z-index:0}
 .idea-origin,.idea-result{position:relative;top:auto;left:auto;right:auto;width:100%;grid-column:1;z-index:2}
 .product-visual{margin-bottom:6px}
 .idea-origin strong{display:table;margin:auto;padding:0 14px;font-size:16px}
 .idea-origin small{display:table;margin:7px auto 0;padding:0 12px;font-size:11px}
 .idea-possibilities{position:relative;left:auto;top:auto;width:100%;height:auto;grid-column:1;grid-template-rows:repeat(3,58px);gap:14px;z-index:2}
 .idea-possibilities>div{width:100%;min-height:58px;padding:16px 20px;gap:18px;background:#0a0a0b}
 .idea-possibilities strong{font-size:13px}
 .idea-result{display:block;background:none;padding:0}
 .idea-reel{margin-bottom:10px}
 .idea-result strong{display:table;margin:auto;padding:3px 8px;font-size:16px}
 .idea-platforms{display:flex;gap:20px;margin:15px auto 0;width:max-content;padding:0 15px}
 .idea-light{top:300px;left:-190px;opacity:.2}
 .production-flow{margin-top:28px;gap:16px}
}
@media(prefers-reduced-motion:reduce){
 .idea-map .orbit-satellite{animation:none!important;offset-distance:12%}
 .idea-map .orbit-satellite--second{offset-distance:62%}
 .connection-pulses{display:none}
 .idea-possibilities>div{transform:none;opacity:1}
 .reel-sheet{transition:none;translate:0 0;rotate:0deg}
}