/*
Theme Name: 3SENSE Premium
Theme URI: https://3sense.live
Author: OpenAI for 3SENSE
Description: Een donkere, futuristische one-page WordPress-theme voor 3SENSE. Inclusief geanimeerd logo, subtiele artiestenfoto, music-, events- en bookingssecties.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: threesense
*/

:root{
  --s3-bg:#020305;
  --s3-bg-soft:#070a0e;
  --s3-panel:rgba(255,255,255,.035);
  --s3-line:rgba(255,255,255,.095);
  --s3-text:#f5f7f9;
  --s3-muted:#969fa8;
  --s3-blue:#13b5ff;
  --s3-blue-deep:#0677ff;
  --s3-max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--s3-bg);
  color:var(--s3-text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  overflow-x:hidden;
}
body.admin-bar .s3-nav{top:32px}
a{color:inherit}
.s3-container{width:min(var(--s3-max),calc(100% - 42px));margin-inline:auto}
.s3-site{min-height:100vh;background:
  radial-gradient(circle at 50% 0%,rgba(19,181,255,.13),transparent 30%),
  linear-gradient(180deg,#020305 0%,#06090d 56%,#020305 100%)}
.s3-nav{
  position:fixed;z-index:100;left:0;right:0;top:0;
  background:rgba(2,3,5,.70);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.055)
}
.s3-nav-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.s3-mini-logo{width:132px;height:auto;display:block;filter:drop-shadow(0 0 14px rgba(19,181,255,.12))}
.s3-menu{display:flex;align-items:center;gap:26px}
.s3-menu a{text-decoration:none;text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:#c5ccd2;transition:.25s}
.s3-menu a:hover{color:#fff}
.s3-menu-toggle{display:none;border:1px solid var(--s3-line);background:transparent;color:#fff;padding:10px 12px;font-size:18px}
.s3-hero{
  min-height:100svh;position:relative;display:grid;align-items:center;
  padding:116px 0 70px;overflow:hidden
}
.s3-hero:after{
  content:"";position:absolute;inset:auto 0 0;height:30%;
  background:linear-gradient(transparent,var(--s3-bg));pointer-events:none
}
.s3-grid{
  position:absolute;inset:0;opacity:.20;background-image:
  linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:58px 58px;mask-image:linear-gradient(to bottom,black,transparent 88%)
}
.s3-beams{position:absolute;inset:0;background:
  radial-gradient(ellipse at 20% 95%,rgba(19,181,255,.18),transparent 24%),
  radial-gradient(ellipse at 80% 95%,rgba(19,181,255,.14),transparent 25%);
  mix-blend-mode:screen
}
.s3-artist-ghost{
  position:absolute;right:-2%;bottom:-4%;width:min(480px,40vw);height:80%;
  object-fit:cover;object-position:center top;opacity:.22;filter:grayscale(1) sepia(.2) hue-rotate(160deg) saturate(1.6) contrast(1.15);
  mask-image:linear-gradient(to left,black 58%,transparent 100%)
}
.s3-hero-inner{position:relative;z-index:4;text-align:center;display:grid;justify-items:center}
.s3-logo-stage{
  position:relative;width:min(760px,78vw);aspect-ratio:16/9;display:grid;place-items:center;
  isolation:isolate;overflow:hidden;border-radius:14px;
  box-shadow:0 0 42px rgba(19,181,255,.10)
}
.s3-logo-video{
  grid-area:1/1;width:100%;height:100%;display:block;object-fit:contain;
  filter:drop-shadow(0 0 24px rgba(19,181,255,.16));pointer-events:none;
  opacity:0;transition:opacity .75s ease-in-out;will-change:opacity
}
.s3-logo-video.is-active{opacity:1}
.s3-loop-stage:before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 34px rgba(2,3,5,.42);border:1px solid rgba(255,255,255,.055);border-radius:14px
}
.s3-tagline{margin-top:12px;text-transform:uppercase;letter-spacing:.52em;font-size:clamp(10px,1.3vw,15px);color:#d7dde2}
.s3-lead{max-width:680px;margin:28px auto 0;color:#9da6af;font-size:clamp(16px,2vw,20px);line-height:1.72}
.s3-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.s3-btn{
  min-width:154px;display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;text-transform:uppercase;letter-spacing:.16em;font-size:11px;
  padding:15px 24px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.025);
  transition:.25s
}
.s3-btn:hover{transform:translateY(-2px);border-color:var(--s3-blue);box-shadow:0 0 26px rgba(19,181,255,.17)}
.s3-btn-primary{background:linear-gradient(135deg,var(--s3-blue),var(--s3-blue-deep));border-color:transparent;color:#001018;font-weight:800}
.s3-scroll{position:absolute;z-index:5;bottom:24px;left:50%;transform:translateX(-50%);font-size:10px;text-transform:uppercase;letter-spacing:.22em;color:#6d7680}
.s3-section{padding:110px 0;border-top:1px solid var(--s3-line)}
.s3-eyebrow{color:var(--s3-blue);font-size:11px;letter-spacing:.3em;text-transform:uppercase;margin-bottom:18px}
.s3-title{font-size:clamp(38px,5.3vw,70px);line-height:1.02;letter-spacing:-.035em;margin:0 0 27px;max-width:900px}
.s3-copy{max-width:760px;color:#a5adb5;font-size:clamp(18px,2vw,22px);line-height:1.72}
.s3-about-grid{display:grid;grid-template-columns:1fr .8fr;gap:62px;align-items:center}
.s3-photo-card{position:relative;min-height:540px;border:1px solid var(--s3-line);overflow:hidden;background:#020407}
.s3-photo-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:saturate(.65) contrast(1.12);opacity:.74}
.s3-photo-card:after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(2,3,5,.22),transparent 55%),
  linear-gradient(0deg,#030507 0%,transparent 48%),
  radial-gradient(circle at 70% 20%,rgba(19,181,255,.14),transparent 30%)}
.s3-photo-caption{position:absolute;z-index:2;left:24px;bottom:20px;text-transform:uppercase;letter-spacing:.2em;font-size:10px;color:#c3cbd2}
.s3-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.s3-pillar{min-height:280px;padding:30px;border:1px solid var(--s3-line);background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.01));position:relative;overflow:hidden}
.s3-pillar:before{content:"";position:absolute;right:-70px;top:-70px;width:180px;height:180px;border-radius:50%;background:rgba(19,181,255,.11);filter:blur(34px)}
.s3-number{color:#606b75;font-size:11px;letter-spacing:.2em}.s3-pillar h3{font-size:25px;margin:75px 0 14px}.s3-pillar p{margin:0;color:#9ca5ae;line-height:1.7}
.s3-mix{margin-top:40px;padding:30px;border:1px solid var(--s3-line);background:linear-gradient(135deg,rgba(19,181,255,.085),rgba(255,255,255,.012));display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.s3-mix h3{font-size:clamp(28px,4vw,44px);margin:0 0 9px}.s3-mix p{color:var(--s3-muted);margin:0}
.s3-wave{height:46px;margin-top:22px;opacity:.7;background:repeating-linear-gradient(90deg,var(--s3-blue) 0 2px,transparent 2px 7px);mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);transform:scaleY(.55)}
.s3-events{margin-top:36px;border-top:1px solid var(--s3-line)}
.s3-event{display:grid;grid-template-columns:130px 1fr auto;gap:26px;align-items:center;padding:24px 0;border-bottom:1px solid var(--s3-line)}
.s3-event-date{font-weight:750;color:var(--s3-blue)}.s3-event h4{font-size:20px;margin:0 0 6px}.s3-event p{margin:0;color:var(--s3-muted)}
.s3-status{border:1px solid var(--s3-line);padding:9px 12px;text-transform:uppercase;letter-spacing:.12em;font-size:10px;color:#c4cbd1}
.s3-contact{text-align:center;background:radial-gradient(circle at center,rgba(19,181,255,.12),transparent 46%)}
.s3-contact .s3-title,.s3-contact .s3-copy{margin-left:auto;margin-right:auto}
.s3-footer{border-top:1px solid var(--s3-line);padding:36px 0;color:#737c85;font-size:13px}
.s3-footer-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.s3-socials{display:flex;gap:18px;flex-wrap:wrap}.s3-socials a{text-decoration:none;color:#aeb5bc}.s3-socials a:hover{color:#fff}
@keyframes s3breathe{0%,100%{transform:scale(1);filter:drop-shadow(0 0 20px rgba(19,181,255,.13))}50%{transform:scale(1.012);filter:drop-shadow(0 0 34px rgba(19,181,255,.22))}}
@media(max-width:900px){
  body.admin-bar .s3-nav{top:46px}
  .s3-menu-toggle{display:block}.s3-menu{display:none;position:absolute;top:76px;left:0;right:0;padding:20px;flex-direction:column;background:rgba(2,3,5,.97);border-bottom:1px solid var(--s3-line)}
  .s3-menu.is-open{display:flex}
  .s3-about-grid,.s3-pillars{grid-template-columns:1fr}
  .s3-photo-card{min-height:520px}
  .s3-artist-ghost{width:62vw;opacity:.14}
  .s3-section{padding:82px 0}
}
@media(max-width:620px){
  .s3-container{width:min(var(--s3-max),calc(100% - 26px))}
  .s3-mini-logo{width:105px}
  .s3-tagline{letter-spacing:.34em}
  .s3-mix{grid-template-columns:1fr}
  .s3-event{grid-template-columns:1fr;gap:8px}
  .s3-logo-stage{width:94vw}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.s3-main-logo{animation:none}}