/* Sentovex — creative layer: ambient light, cursor, tilt, reveal, "what if" machine, contact page.
   Everything here is progressive: without JS or with reduced motion the page stays fully readable. */

:root{--cyan:#8cf4e5;--glass:linear-gradient(135deg,#2a2233b0,#141a24d0);--glass-line:#cab0ec38}

/* ---------- ambient light (sits behind all content) ---------- */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ambient i{position:absolute;border-radius:50%;will-change:transform}
.ambient i:nth-child(1){width:46vw;height:46vw;left:-14vw;top:-10vw;background:radial-gradient(circle,#7a55ff 0,#7a55ff00 62%);opacity:.34;animation:amb-a 28s ease-in-out infinite alternate}
.ambient i:nth-child(2){width:36vw;height:36vw;right:-12vw;top:28vh;background:radial-gradient(circle,#1fc7b3 0,#1fc7b300 62%);opacity:.2;animation:amb-b 34s ease-in-out infinite alternate}
.ambient i:nth-child(3){width:42vw;height:42vw;left:24vw;bottom:-18vw;background:radial-gradient(circle,#b04dff 0,#b04dff00 62%);opacity:.22;animation:amb-c 40s ease-in-out infinite alternate}
@keyframes amb-a{to{transform:translate3d(14vw,10vh,0) scale(1.2)}}
@keyframes amb-b{to{transform:translate3d(-16vw,-12vh,0) scale(.85)}}
@keyframes amb-c{to{transform:translate3d(12vw,-16vh,0) scale(1.15)}}
.spot{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;z-index:-1;pointer-events:none;background:radial-gradient(circle,#beabff26,#8cf4e50a 45%,transparent 68%);opacity:0;transition:opacity .5s;will-change:transform}
.spot.on{opacity:1}

/* ---------- cursor ring ---------- */
.cr-ring,.cr-dot{position:fixed;left:0;top:0;z-index:60;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .3s,width .25s,height .25s,margin .25s,background .25s,border-color .25s;will-change:transform}
.cr-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid #beabffaa}
.cr-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--cyan)}
.cr-ring.on,.cr-dot.on{opacity:1}
.cr-ring.hot{width:64px;height:64px;margin:-32px 0 0 -32px;background:#beabff1c;border-color:#beabffdd}
.cr-ring.down{width:24px;height:24px;margin:-12px 0 0 -12px;background:#beabff40}

/* ---------- reveal on scroll ---------- */
.cr-js [data-cr]{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.cr-js [data-cr].in{opacity:1;transform:none}
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
[data-split] .w>span{display:inline-block;transform:translateY(112%) rotate(4deg);transform-origin:left bottom;transition:transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*70ms + var(--d,0ms))}
[data-split].in .w>span{transform:none}
.cr-js [data-cr][data-split]{opacity:1;transform:none}

/* ---------- tilt + glow surfaces ---------- */
[data-tilt]{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform}
[data-tilt].live{transition:transform .08s linear}
[data-glow]{position:relative}
[data-glow]:before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),#beabff22,transparent 45%);opacity:0;transition:opacity .35s}
[data-glow]:hover:before,[data-glow]:focus-within:before{opacity:1}

/* ---------- small pieces used on every page ---------- */
.lang-switch{border:1px solid transparent}
.copy-mail{font:inherit;font-size:12px;letter-spacing:.5px;color:#ddd0f9;background:transparent;border:1px solid #b7a4d855;border-radius:30px;padding:8px 15px;cursor:pointer;transition:background .25s,border-color .25s}
.copy-mail:hover{background:#beabff1a;border-color:#beabffaa}
.cr-toast{position:fixed;left:50%;bottom:28px;z-index:70;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:#25232dee;color:#e7dfff;border:1px solid #8886a266;border-radius:30px;padding:12px 20px;font-size:13px;backdrop-filter:blur(15px);transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.cr-toast.show{opacity:1;transform:translate(-50%,0)}
.clock{display:inline-flex;align-items:center;gap:9px}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 #8cf4e588;animation:pulse 2.2s ease-out infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px #8cf4e500}100%{box-shadow:0 0 0 0 #8cf4e500}}

/* ---------- "what if" machine (home) ---------- */
.whatif{position:relative;border-top:1px solid var(--border)}
.whatif-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,80px);align-items:center;padding-top:70px}
.whatif h2{font-size:clamp(36px,4.4vw,66px);letter-spacing:-2.6px;line-height:1.1;margin:0 0 24px;text-align:left}
.whatif h2 span{color:var(--purple)}
.whatif-copy>p{color:#b5afc1;font-size:16px;line-height:1.85;max-width:430px;margin:0}
.whatif-copy .wi-count{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-size:12px;letter-spacing:1.5px;color:#9c9ba4}
.wi-machine{position:relative;border-radius:26px;padding:clamp(22px,3vw,44px);background:var(--glass);border:1px solid var(--glass-line);box-shadow:0 30px 90px #0007,inset 0 1px 0 #f5deff30;overflow:hidden}
.wi-machine:after{content:'';position:absolute;inset:-70% -70%;background:linear-gradient(110deg,transparent 43%,#e9d5ff10 48%,#b1e9f614 50%,transparent 55%);animation:holo-sweep 8s linear infinite;pointer-events:none}
.wi-head{display:flex;justify-content:space-between;font-size:11px;letter-spacing:2px;color:#a597b9;margin-bottom:22px}
.wi-static{font-size:clamp(20px,2.2vw,30px);color:#9f98ad;letter-spacing:-.8px;line-height:1.3;display:block;margin:6px 0}
.wi-reel{position:relative;height:1.35em;overflow:hidden;font-size:clamp(30px,4vw,58px);letter-spacing:-2.2px;font-weight:700;line-height:1.35;color:#efe6ff;-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.wi-strip{will-change:transform}
.wi-strip>div{height:1.35em;white-space:nowrap;overflow:hidden;text-overflow:clip}
.wi-reel.r2 .wi-strip>div{color:var(--purple)}
.wi-reel.r3 .wi-strip>div{color:var(--cyan)}
.wi-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px;position:relative;z-index:2}
.wi-actions .button{margin:0;gap:18px}
.button.ghost{background:transparent;border:1px solid #b7a4d855;color:#ddd0f9;font-size:13px}
.button.ghost:hover{background:#beabff18}
.wi-spin .spin-ico{display:inline-block;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.wi-spin.spinning .spin-ico{transform:rotate(360deg)}
.wi-note{margin:14px 0 0;font-size:12px;color:#817b90;position:relative;z-index:2}

/* ---------- contact page ---------- */
.contact-page{position:relative}
.c-hero{position:relative;padding:64px 5% 8px;max-width:1500px;margin:0 auto;overflow:hidden}
.c-orbits{position:absolute;inset:0;pointer-events:none;z-index:0}
.c-orbits .orbit{left:auto;right:-6%;margin-left:0;top:-20px;opacity:.9}
.c-orbits .orbit-two{right:6%;top:-60px}
.c-hero .eyebrow{position:relative;z-index:1;font-size:12px;letter-spacing:1.5px}
.c-hero h1{position:relative;z-index:1;font-size:clamp(64px,12.4vw,190px);letter-spacing:-.075em;line-height:.98;margin:30px 0 22px;font-weight:700}
.c-hero h1 em{font-style:normal;color:var(--purple)}
.c-lede{position:relative;z-index:1;max-width:540px;color:#b7b6bc;font-size:17px;line-height:1.85;margin:0}
.c-grid{position:relative;z-index:1;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,4.5vw,76px);padding:54px 5% 120px;max-width:1500px;margin:0 auto;align-items:start}
.c-mail{display:block;font-size:clamp(28px,3.4vw,52px);letter-spacing:-2px;font-weight:700;color:var(--purple);background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .5s cubic-bezier(.2,.8,.2,1);width:fit-content;max-width:100%;overflow-wrap:anywhere;padding-bottom:4px}
.c-mail:hover{background-size:100% 2px}
.c-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:20px 0 34px}
.c-chip{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:1px;color:#b9b3c6;border:1px solid var(--border);border-radius:30px;padding:9px 15px;background:#ffffff08}
.c-label{font-size:11px;letter-spacing:2px;color:#9c9ba4;margin:0 0 14px}
.c-cards{display:grid;gap:12px}
.c-card{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:18px;border:1px solid var(--border);background:#ffffff06;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s;overflow:hidden}
.c-card:hover{transform:translateX(8px);border-color:#beabff77;background:#beabff10}
.c-card .ico{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:20px;color:#101112;background:var(--purple)}
.c-card:nth-child(2) .ico{background:var(--cyan)}
.c-card:nth-child(3) .ico{background:#e9d5ff}
.c-card b{display:block;font-size:16px;letter-spacing:-.4px}
.c-card small{display:block;color:#98929f;font-size:13px;line-height:1.5;margin-top:2px}
.c-card .go{margin-left:auto;font-size:22px;color:#beabff;transition:transform .3s}
.c-card:hover .go{transform:translateX(5px)}
.c-form{position:relative;border-radius:28px;padding:clamp(24px,3.4vw,46px);background:var(--glass);border:1px solid var(--glass-line);box-shadow:0 30px 90px #0007,inset 0 1px 0 #f5deff30;overflow:hidden}
.c-form fieldset{border:0;padding:0;margin:0 0 26px;min-width:0}
.c-form legend{padding:0;font-size:11px;letter-spacing:2px;color:#a597b9;margin-bottom:12px}
.seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:5px;border-radius:16px;border:1px solid #ffffff1c;background:#0a0b0e70}
.seg input,.chips input{position:absolute;opacity:0;pointer-events:none}
.seg label{position:relative;z-index:1;text-align:center;padding:13px 6px;font-size:14px;font-weight:700;color:#a8a2b6;cursor:pointer;transition:color .3s;border-radius:12px}
.seg input:checked+label{color:#101112}
.seg input:focus-visible+label,.chips input:focus-visible+label{outline:2px solid var(--purple);outline-offset:2px}
.seg .thumb{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:0;border-radius:12px;background:linear-gradient(120deg,#c9b8ff,#8cf4e5);box-shadow:0 8px 24px #a98bff44;transition:transform .5s cubic-bezier(.2,.9,.2,1),width .5s cubic-bezier(.2,.9,.2,1)}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips label{cursor:pointer;font-size:13px;color:#b9b3c6;border:1px solid #ffffff22;border-radius:30px;padding:10px 16px;transition:transform .25s,background .25s,border-color .25s,color .25s;user-select:none}
.chips label:hover{border-color:#beabff88;transform:translateY(-2px)}
.chips input:checked+label{background:#beabff;color:#101112;border-color:#beabff;transform:translateY(-2px)}
.fl{position:relative;margin-bottom:22px}
.fl input,.fl textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#0a0b0e70;border:1px solid #ffffff22;border-radius:16px;padding:24px 18px 10px;outline:none;transition:border-color .25s,box-shadow .25s;resize:vertical}
.fl textarea{min-height:150px;line-height:1.6}
.fl label{position:absolute;left:18px;top:17px;font-size:15px;color:#8f8a9c;pointer-events:none;transform-origin:left top;transition:transform .25s cubic-bezier(.2,.8,.2,1),color .25s}
.fl input:focus,.fl textarea:focus{border-color:#beabff;box-shadow:0 0 0 4px #beabff1c}
.fl input:focus+label,.fl input:not(:placeholder-shown)+label,.fl textarea:focus+label,.fl textarea:not(:placeholder-shown)+label{transform:translateY(-11px) scale(.74);color:#beabff}
.fl .count{position:absolute;right:14px;bottom:10px;font-size:11px;color:#6f6a7b;pointer-events:none}
.c-send{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.c-send .button{margin:0;gap:26px;background:var(--purple);color:#101112;font-size:15px;padding:19px 28px}
.c-send .button .arr{display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.c-send .button:hover .arr{transform:translateX(6px) rotate(-8deg)}
.c-send small{color:#817b90;font-size:12px;line-height:1.6;max-width:260px}
.c-done{position:absolute;inset:0;z-index:5;display:grid;place-content:center;text-align:center;padding:30px;background:linear-gradient(135deg,#2a2233f4,#141a24f8);opacity:0;pointer-events:none;transition:opacity .5s}
.c-form.sent .c-done{opacity:1;pointer-events:auto}
.c-done .big{font-size:clamp(40px,6vw,80px);letter-spacing:-3px;font-weight:700;line-height:1}
.c-done .big em{font-style:normal;color:var(--purple)}
.c-done p{color:#b5afc1;max-width:340px;margin:18px auto 24px;line-height:1.8}
.c-done .button{margin:0 auto}
.burst{position:absolute;left:50%;top:44%;font-size:22px;color:var(--purple);pointer-events:none;z-index:6;animation:burst 1.4s cubic-bezier(.1,.8,.2,1) forwards}
@keyframes burst{from{transform:translate(-50%,-50%) scale(.3);opacity:1}to{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r)) scale(1.2);opacity:0}}

/* ---------- responsive ---------- */
@media(max-width:900px){
 .whatif-grid,.c-grid{grid-template-columns:1fr}
 .whatif-grid{padding-top:44px}
 .c-hero{padding-top:38px}
 .c-grid{padding-bottom:80px}
 .c-orbits .orbit{right:-30%}
 .wi-reel{font-size:clamp(28px,8.4vw,44px);letter-spacing:-1.6px}
}
@media(max-width:520px){
 .seg label{font-size:13px;padding:12px 2px}
 .c-send{flex-direction:column;align-items:stretch}
 .c-send .button{justify-content:space-between}
 .c-send small{max-width:none}
}
@media(pointer:coarse){.cr-ring,.cr-dot,.spot{display:none}}
@media(prefers-reduced-motion:reduce){
 .ambient i,.pulse,.wi-machine:after{animation:none}
 .cr-js [data-cr]{opacity:1;transform:none;transition:none}
 [data-split] .w>span{transform:none;transition:none}
 [data-tilt]{transform:none!important}
 .cr-ring,.cr-dot,.spot{display:none}
}
body.paused .ambient i{animation-play-state:paused}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.c-send .button>span:first-child{font-size:inherit;line-height:inherit}
.c-send .button .arr{font-size:22px}
.c-card small a{text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.c-card small a:hover{color:#beabff}
.c-form.sent .c-send,.c-form.sent fieldset,.c-form.sent .fl{visibility:hidden}

/* calm hover for the two header links: an underline draws in, the text never changes */
header nav a:not(.contact-nav):not(.lang-switch){position:relative;padding:6px 0}
header nav a:not(.contact-nav):not(.lang-switch):after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--purple);transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
header nav a:not(.contact-nav):not(.lang-switch):hover:after,header nav a:not(.contact-nav):not(.lang-switch):focus-visible:after{transform:scaleX(1);transform-origin:left}