/* 15 idées (reactbits.dev MIT / motionsites.ai) – vanilla, Jack : #0C0C0C, Kanit, magenta/violet/orange */
:root{--f15m:#ff3ea5;--f15v:#8b5cf6;--f15o:#ff8a3d;--f15g:linear-gradient(90deg,#ff3ea5,#8b5cf6 50%,#ff8a3d);--f15bg:#0C0C0C;--f15c:#141418;--f15t:#f4f2f7;--f15s:rgba(244,242,247,.66);--f15l:rgba(255,255,255,.09)}
html.light{--f15bg:#f7f5fa;--f15c:#fff;--f15t:#151219;--f15s:rgba(21,18,25,.66);--f15l:rgba(20,10,40,.1)}
.fx-k{font:600 .72rem/1 Kanit,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--f15m);margin:0 0 .6rem}
@property --f15a{syntax:'<angle>';inherits:false;initial-value:0deg}

/* 1 Scroll Stack */
.f15-stack{margin:1.5rem 0 3rem;padding-bottom:20vh}
.f15-sc{position:sticky;top:calc(84px + var(--i)*14px);height:min(62vh,520px);margin:0 0 6vh;border-radius:26px;overflow:hidden;background:var(--f15c);border:1px solid var(--f15l);box-shadow:0 30px 60px -30px rgba(0,0,0,.7);transform-origin:50% 0;cursor:pointer;will-change:transform}
.f15-sc img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.f15-sc>div{position:absolute;inset:auto 0 0;padding:1.4rem 1.6rem;background:linear-gradient(transparent,rgba(12,12,12,.92));color:#fff}
.f15-sc span{font:900 .8rem Kanit;background:var(--f15g);-webkit-background-clip:text;background-clip:text;color:transparent}
.f15-sc h3{font:900 clamp(1.6rem,5vw,2.8rem)/1 Kanit;margin:.2rem 0 .3rem;text-transform:uppercase}
.f15-sc p{margin:0;opacity:.8;max-width:60ch;font-size:.92rem}

/* 2 Electric Border */
.f15-elec{position:relative;isolation:isolate}
.f15-elec::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:conic-gradient(from var(--f15a),#ff3ea5,#8b5cf6,#ff8a3d,#ff3ea5);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1;animation:f15spin 4s linear infinite;filter:drop-shadow(0 0 6px rgba(255,62,165,.7))}
.f15-elec.best::before{animation-duration:2.2s;filter:drop-shadow(0 0 10px rgba(255,62,165,.9)) drop-shadow(0 0 18px rgba(139,92,246,.6))}
.f15-spark{position:absolute;inset:-6px;border-radius:inherit;pointer-events:none;z-index:-2;background:conic-gradient(from var(--f15a),transparent 0 80%,rgba(255,138,61,.9) 88%,transparent 92%);filter:blur(8px);animation:f15spin 2.2s linear infinite}
@keyframes f15spin{to{--f15a:360deg}}

/* 3 Text Pressure */
.f15-tp{display:flex;justify-content:space-between;margin:.5rem 0 2rem;font-family:Kanit,sans-serif;font-size:clamp(3.2rem,15vw,11rem);line-height:.9;user-select:none;touch-action:pan-y;overflow:hidden}
.f15-tp span{display:inline-block;transform-origin:50% 100%;transition:font-weight .15s;background:var(--f15g);background-size:800% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:300}
.f15-tp span:nth-child(2){background-position:14% 0}.f15-tp span:nth-child(3){background-position:28% 0}.f15-tp span:nth-child(4){background-position:42% 0}.f15-tp span:nth-child(5){background-position:56% 0}.f15-tp span:nth-child(6){background-position:70% 0}.f15-tp span:nth-child(7){background-position:84% 0}

/* 4 Glare Hover */
.f15-glare{position:relative;overflow:hidden}
.f15-glare::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.22),transparent 60%),linear-gradient(115deg,transparent 38%,rgba(255,255,255,.38) 48%,rgba(255,62,165,.12) 52%,transparent 62%);background-size:100% 100%,250% 100%;background-position:0 0,120% 0;opacity:0;transition:opacity .25s,background-position .7s ease;z-index:20;border-radius:inherit}
.f15-glare:hover::after{opacity:1;background-position:0 0,40% 0}

/* 6 Letter Glitch */
.f15-lg-h{position:relative;overflow:hidden;isolation:isolate}
.f15-lg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.55}
.f15-lg-h::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 30% 60%,rgba(12,12,12,.3),rgba(12,12,12,.92) 75%)}
html.light .f15-lg{opacity:.3}html.light .f15-lg-h::after{background:radial-gradient(ellipse at 30% 60%,rgba(247,245,250,.4),rgba(247,245,250,.95) 75%)}

/* 7 Animated List */
.f15-al{opacity:0;transform:translateY(18px) scale(.97);transition:opacity .5s ease var(--al,0ms),transform .5s cubic-bezier(.2,.8,.2,1) var(--al,0ms)}
.f15-al.f15-in{opacity:1;transform:none}

/* 8 Stepper */
.f15-step{max-width:640px;margin:0 auto 2rem;padding:1.4rem;border-radius:22px;background:var(--f15c);border:1px solid var(--f15l)}
.f15-dots{display:flex;list-style:none;margin:0 0 1.2rem;padding:0;gap:0}
.f15-dots li{flex:1;display:flex;align-items:center}.f15-dots li:not(:last-child)::after{content:"";flex:1;height:3px;margin:0 6px;border-radius:2px;background:var(--f15l);transition:background .4s}
.f15-dots li.done::after{background:var(--f15g)}
.f15-dots button{width:38px;height:38px;border-radius:50%;border:2px solid var(--f15l);background:transparent;color:var(--f15t);font:700 .95rem Kanit;flex:none;transition:.3s}
.f15-dots .on button{border-color:var(--f15m);box-shadow:0 0 0 4px rgba(255,62,165,.18)}.f15-dots .done button{background:var(--f15g);border-color:transparent;color:#fff}
.f15-pane{min-height:110px}.f15-pane h3{font:800 1.4rem Kanit;margin:0 0 .3rem}.f15-pane p{color:var(--f15s);margin:0}
.f15-sw{animation:f15sw .35s ease}@keyframes f15sw{from{opacity:0;transform:translateX(16px)}}
.f15-nav{display:flex;justify-content:space-between;margin-top:1rem}

/* 9 Audio Showcase */
.au-hero{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:2rem;align-items:center;padding:1.6rem;border-radius:28px;background:radial-gradient(circle at 15% 50%,rgba(255,62,165,.18),transparent 55%),radial-gradient(circle at 90% 20%,rgba(139,92,246,.2),transparent 50%),var(--f15c);border:1px solid var(--f15l);margin-bottom:2rem}
.au-disc{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 10px rgba(0,0,0,.6),0 0 0 12px rgba(255,62,165,.4),0 30px 60px -20px rgba(255,62,165,.4);animation:f15rot2 14s linear infinite}
.au-disc img{width:100%;height:100%;object-fit:cover}.au-disc i{position:absolute;inset:40%;border-radius:50%;background:#0C0C0C;box-shadow:0 0 0 6px rgba(255,255,255,.12)}
@keyframes f15rot2{to{transform:rotate(360deg)}}
.au-now h2{font:900 clamp(1.8rem,5vw,3.2rem)/1 Kanit;margin:0 0 .3rem;background:var(--f15g);-webkit-background-clip:text;background-clip:text;color:transparent}
.au-now>p{color:var(--f15s);margin:0}
.au-eq{display:flex;align-items:flex-end;gap:4px;height:64px;margin:1.2rem 0}
.au-eq i{flex:1;height:var(--h);border-radius:3px;background:var(--f15g);background-size:2800% 100%;transform-origin:bottom;animation:f15eq .9s ease-in-out var(--d) infinite alternate}
@keyframes f15eq{from{transform:scaleY(.15)}}
.au-ctl{display:flex;gap:.6rem;flex-wrap:wrap}
.au-list{list-style:none;padding:0;margin:0 0 2rem;display:grid;gap:.6rem}
.au-list li::before,.au-list li::after{content:none!important;display:none!important}
.au-list li{display:grid!important;grid-template-columns:2.2rem 88px 1fr auto 44px;gap:1rem;align-items:center;padding:.6rem .9rem;border-radius:16px;background:var(--f15c);border:1px solid var(--f15l)}
.au-list .n{font:900 1.1rem Kanit;color:var(--f15m)}.au-list picture{display:block;width:88px}.au-list img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
.au-list b{display:block;font:700 1.05rem Kanit}.au-list small,.au-list em{color:var(--f15s);font-size:.82rem;font-style:normal}
.au-play{width:44px;height:44px;border-radius:50%;border:0;background:var(--f15g);color:#fff;font-size:1rem;cursor:pointer}
.au-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.au-card{padding:1.3rem;border-radius:20px;background:var(--f15c);border:1px solid var(--f15l);display:flex;flex-direction:column;gap:.35rem}
.au-card b{font:800 1.1rem Kanit}.au-card small{color:var(--f15s)}.au-card .btn{align-self:flex-start;margin-top:.4rem}
.au-big{font:900 3.6rem/1 Kanit;background:var(--f15g);-webkit-background-clip:text;background-clip:text;color:transparent}

/* 10 Movie Premiere */
.mp-hero{position:relative;overflow:hidden;border-radius:28px;min-height:340px;display:grid;place-items:center;text-align:center;background:radial-gradient(ellipse at 50% 0,rgba(255,138,61,.35),transparent 60%),#07060a;margin-bottom:2rem;color:#fff}
.mp-curt{position:absolute;top:0;bottom:0;width:52%;background:repeating-linear-gradient(90deg,#4a0b2a 0 18px,#7a1446 18px 30px,#3a0820 30px 44px);box-shadow:inset -30px 0 40px rgba(0,0,0,.6);animation:f15curt 2.2s cubic-bezier(.7,0,.2,1) .3s forwards;z-index:2}
.mp-curt.l{left:0}.mp-curt.r{right:0;transform-origin:right;box-shadow:inset 30px 0 40px rgba(0,0,0,.6)}
@keyframes f15curt{to{width:7%}}
.mp-in{position:relative;z-index:1;padding:2rem}
.mp-tix{font:600 .8rem Kanit;letter-spacing:.3em;text-transform:uppercase;opacity:.75}
.mp-in h2{font:900 clamp(2rem,7vw,4.6rem)/.95 Kanit;margin:.4rem 0;background:linear-gradient(180deg,#fff,#ffcf9e);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 40px rgba(255,138,61,.3)}
.mp-date{opacity:.85}.mp-date b{color:var(--f15o)}
.mp-beam{position:absolute;top:-20%;width:30%;height:140%;background:linear-gradient(180deg,rgba(255,220,180,.25),transparent 70%);filter:blur(20px);transform:rotate(18deg);animation:f15beam 6s ease-in-out infinite alternate}
.mp-beam.a{left:10%}.mp-beam.b{right:10%;transform:rotate(-18deg);animation-delay:-3s}
@keyframes f15beam{to{opacity:.4;translate:30px 0}}
.mp-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.mp-card{border-radius:20px;overflow:hidden;background:var(--f15c);border:1px solid var(--f15l)}
.mp-poster{position:relative}.mp-poster .vid{width:100%;margin:0;border-radius:0}
.mp-meta{padding:1rem 1.1rem 1.2rem;border-top:2px dashed var(--f15l);position:relative}
.mp-no{font:900 .75rem Kanit;color:var(--f15o);letter-spacing:.2em}.mp-meta h3{font:900 1.3rem Kanit;margin:.2rem 0}.mp-meta time{font-size:.8rem;color:var(--f15m)}.mp-meta p{color:var(--f15s);font-size:.9rem;margin:.4rem 0 0}

/* 11 Luxury Real Estate */
.re-hero{position:relative;border-radius:28px;overflow:hidden;min-height:440px;display:flex;align-items:flex-end;margin-bottom:2rem;color:#fff}
.re-hero picture,.re-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.re-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,12,12,.9),rgba(12,12,12,.2) 70%)}
.re-in{position:relative;z-index:1;padding:2rem;max-width:520px}.re-in h2{font:300 clamp(2rem,6vw,3.6rem)/1 Kanit;margin:0 0 .5rem;letter-spacing:-.02em}.re-in p{opacity:.85}
.re-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.re-card{display:block;border-radius:20px;overflow:hidden;background:var(--f15c);border:1px solid var(--f15l);color:inherit;text-decoration:none;transition:transform .35s,box-shadow .35s}
.re-card img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s}
.re-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -24px rgba(255,62,165,.5)}.re-card:hover img{transform:scale(1.05)}
.re-card>div{padding:1rem 1.2rem 1.3rem}.re-tag{font:600 .7rem Kanit;letter-spacing:.18em;text-transform:uppercase;color:var(--f15o)}
.re-card h3{font:300 1.6rem Kanit;margin:.2rem 0}.re-card p{color:var(--f15s);font-size:.9rem;margin:0 0 .6rem}.re-cta{font:600 .85rem Kanit;color:var(--f15m)}

/* 12 Data Storytelling */
.ds-cd{padding:2rem 1.5rem;border-radius:28px;text-align:center;background:radial-gradient(circle at 50% 0,rgba(139,92,246,.3),transparent 60%),var(--f15c);border:1px solid var(--f15l);margin-bottom:2rem}
.ds-t{display:flex;justify-content:center;gap:clamp(.6rem,3vw,2rem)}
.ds-t b{display:block;font:900 clamp(2.4rem,9vw,5.5rem)/1 Kanit;font-variant-numeric:tabular-nums;background:var(--f15g);-webkit-background-clip:text;background-clip:text;color:transparent}
.ds-t small{color:var(--f15s);text-transform:uppercase;letter-spacing:.14em;font-size:.7rem}
.ds-bar{height:8px;border-radius:4px;background:var(--f15l);margin:1.6rem auto .5rem;max-width:620px;overflow:hidden}.ds-bar i{display:block;height:100%;background:var(--f15g);border-radius:4px}
.ds-cap{color:var(--f15s);font-size:.82rem;margin:0}
.ds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2.4rem}
.ds-n{padding:1.3rem;border-radius:20px;background:var(--f15c);border:1px solid var(--f15l);position:relative;overflow:hidden}
.ds-n b{font:900 3.4rem/1 Kanit;background:var(--f15g);-webkit-background-clip:text;background-clip:text;color:transparent}
.ds-n h3{font:700 1rem Kanit;margin:.3rem 0}.ds-n p{color:var(--f15s);font-size:.86rem;margin:0}
.ds-tl{list-style:none;padding:0 0 0 1.4rem;margin:0;border-left:2px solid transparent;border-image:var(--f15g) 1}
.ds-tl li{position:relative;padding:.4rem 0 1rem 1rem}.ds-tl li::before{content:"";position:absolute;left:-1.85rem;top:.6rem;width:12px;height:12px;border-radius:50%;background:var(--f15bg);border:2px solid var(--f15m)}
.ds-tl li.on::before{background:var(--f15m);box-shadow:0 0 12px var(--f15m)}.ds-tl time{display:block;font:700 .8rem Kanit;color:var(--f15o)}

/* 13 Creator Guild */
.f15-has-guild #createurs .rf-hero.cr{display:none}
.f15-guild{display:grid;grid-template-columns:200px 1fr;gap:2rem;align-items:center;padding:2rem;border-radius:28px;margin-bottom:1.5rem;background:radial-gradient(circle at 0 50%,rgba(255,62,165,.22),transparent 55%),radial-gradient(circle at 100% 0,rgba(255,138,61,.18),transparent 50%),var(--f15c);border:1px solid var(--f15l)}
.f15-guild h2{font:900 clamp(2rem,6vw,3.4rem)/1 Kanit;margin:0 0 .6rem}.f15-guild h2 span{background:var(--f15g);-webkit-background-clip:text;background-clip:text;color:transparent}
.f15-guild>div>p:not(.fx-k){color:var(--f15s)}
.f15-crest{position:relative;aspect-ratio:1;display:grid;place-items:center}
.f15-crest i{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;background:conic-gradient(from var(--f15a),#ff3ea5,#8b5cf6,#ff8a3d,#ff3ea5) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:f15spin 8s linear infinite}
.f15-crest i:nth-child(2){inset:14%;animation-direction:reverse;animation-duration:6s}.f15-crest i:nth-child(3){inset:28%;animation-duration:4s}
.f15-crest b{font:900 3rem Kanit;background:var(--f15g);-webkit-background-clip:text;background-clip:text;color:transparent}
.f15-gst{display:flex;gap:1rem;margin:1rem 0 1.2rem;flex-wrap:wrap}.f15-gst div{padding:.7rem 1rem;border-radius:14px;border:1px solid var(--f15l);min-width:96px}
.f15-gst b{display:block;font:900 1.5rem Kanit}.f15-gst small{color:var(--f15s);font-size:.75rem}

/* 14 Arc Summit */
.ev-hero{position:relative;border-radius:28px;overflow:hidden;min-height:480px;display:flex;align-items:center;margin-bottom:2rem;color:#fff}
.ev-hero picture,.ev-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ev-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(12,12,12,.95) 25%,rgba(80,10,60,.5) 60%,rgba(255,138,61,.15))}
.ev-in{position:relative;z-index:1;padding:2rem}
.ev-badge{display:inline-block;padding:.35rem .8rem;border-radius:99px;border:1px solid rgba(255,255,255,.3);font:600 .75rem Kanit;letter-spacing:.14em;text-transform:uppercase}
.ev-in h2{font:900 clamp(3rem,12vw,7rem)/.85 Kanit;margin:.6rem 0;background:var(--f15g);-webkit-background-clip:text;background-clip:text;color:transparent}
.ev-cd{font:600 1.1rem Kanit;margin:.8rem 0 1.2rem}.ev-cd b{font-size:2.2rem;font-weight:900;font-variant-numeric:tabular-nums}
.ev-agenda{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.ev-s{padding:1.2rem;border-radius:20px;background:var(--f15c);border:1px solid var(--f15l);display:flex;flex-direction:column;gap:.3rem}
.ev-s time{font:700 .8rem Kanit;color:var(--f15o);text-transform:uppercase;letter-spacing:.1em}.ev-s h3{font:800 1.1rem Kanit;margin:0}.ev-s p{color:var(--f15s);font-size:.88rem;margin:0 0 .5rem;flex:1}.ev-s .btn{align-self:flex-start}
.ev-s.hot{background:linear-gradient(var(--f15c),var(--f15c)) padding-box,var(--f15g) border-box;border:2px solid transparent}

/* 15 Contact Cybernetic */
.cy{display:grid;grid-template-columns:1fr 260px;gap:1.2rem;padding:1.4rem;border-radius:24px;position:relative;overflow:hidden;background:linear-gradient(rgba(139,92,246,.06) 1px,transparent 1px) 0 0/100% 22px,linear-gradient(90deg,rgba(139,92,246,.06) 1px,transparent 1px) 0 0/22px 100%,var(--f15c);border:1px solid rgba(139,92,246,.35)}
.cy-term{grid-column:1/-1;font:500 .85rem/1.6 ui-monospace,monospace;color:#7cf5c4;background:rgba(0,0,0,.55);padding:.9rem 1.1rem;border-radius:12px;border:1px solid rgba(124,245,196,.25)}
.cy-term p{margin:0}.cy-term b{color:var(--f15m)}.cy-caret{animation:f15blink 1s steps(1) infinite}@keyframes f15blink{50%{opacity:0}}
html.light .cy-term{background:#151219}
.cy-form{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.cy-form label{display:flex;flex-direction:column;gap:.35rem;font:600 .75rem Kanit;letter-spacing:.12em;text-transform:uppercase;color:var(--f15s)}.cy-form .w{grid-column:1/-1}
.cy-form input,.cy-form select,.cy-form textarea{font:400 1rem Kanit;color:var(--f15t);background:rgba(0,0,0,.25);border:1px solid var(--f15l);border-radius:10px;padding:.7rem .8rem;text-transform:none;letter-spacing:0}
html.light .cy-form input,html.light .cy-form select,html.light .cy-form textarea{background:#fff}
.cy-form :focus{outline:none;border-color:var(--f15m);box-shadow:0 0 0 3px rgba(255,62,165,.2),0 0 18px rgba(139,92,246,.35)}
.cy-form button{justify-self:start}.cy-note{grid-column:1/-1;margin:0;color:var(--f15s);font-size:.8rem}
.cy-side{display:flex;flex-direction:column;gap:.8rem}.cy-side div{padding:.9rem 1rem;border-radius:14px;border:1px solid var(--f15l);background:rgba(0,0,0,.15)}
.cy-side b{display:block;font:600 .72rem Kanit;letter-spacing:.14em;text-transform:uppercase;color:var(--f15v)}.cy-side a{color:var(--f15t);word-break:break-all}

@media (max-width:860px){.f15-lg{opacity:.32}.au-hero,.f15-guild{grid-template-columns:1fr}.au-disc{max-width:240px;margin:0 auto}.f15-crest{max-width:140px;margin:0 auto}
 .au-grid,.mp-row,.re-grid,.ds-grid{grid-template-columns:1fr}.ev-agenda{grid-template-columns:1fr 1fr}.cy{grid-template-columns:1fr}
 .au-list li{grid-template-columns:1.6rem 64px 1fr 40px}.au-list picture{width:64px}.au-list em{display:none}.au-play{width:40px;height:40px}
 .f15-sc{height:58vh;top:calc(70px + var(--i)*10px)}.ds-grid{grid-template-columns:1fr 1fr}.ds-n b{font-size:2.6rem}}
@media (max-width:520px){.ev-agenda,.cy-form{grid-template-columns:1fr}.re-hero,.ev-hero{min-height:420px}}
@media (prefers-reduced-motion:reduce){.f15-elec::before,.f15-spark,.au-disc,.au-eq i,.mp-beam,.f15-crest i,.cy-caret{animation:none!important}.mp-curt{display:none}.f15-al{opacity:1;transform:none}.re-card,.re-card img{transition:none}}