/* ═══════════════════════════════════════════════════════════════════════
   CO3 ONE v8 — WORMHOLE
   Cinematic grain + readable type + visible form
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Sohne';src:url('../fonts/sohne-buch.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'SB';src:url('../fonts/sohne-breit-200.woff2') format('woff2');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'SB';src:url('../fonts/sohne-breit-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'SB';src:url('../fonts/sohne-breit-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'SB';src:url('../fonts/sohne-breit-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'SB';src:url('../fonts/sohne-breit-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'SB';src:url('../fonts/sohne-breit-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'SB';src:url('../fonts/sohne-breit-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'GTP';src:url('../fonts/gt-pressura-light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'GTP';src:url('../fonts/gt-pressura-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'GTP';src:url('../fonts/gt-pressura-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#0a0a10;--bg-s:#12121c;--bg-e:#1a1a28;
  --o:#ff6700;--o-dim:rgba(255,103,0,.15);
  --gold:#C4A265;--gold-d:#B89555;
  --t:#e8e8ec;--t-s:#b0b0b8;--t-d:#777;--t-m:#555;
  --f:'Sohne',-apple-system,BlinkMacSystemFont,sans-serif;
  --fd:'SB','Sohne',sans-serif;
  --fm:'GTP','Sohne',sans-serif;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--t);font-family:var(--fd);font-weight:300;
  line-height:1.7;-webkit-font-smoothing:antialiased;
  overflow:hidden;height:100vh;width:100vw;font-style:normal;touch-action:manipulation;
  user-select:none;-webkit-user-select:none;cursor:default;
}
a{color:var(--o);text-decoration:none;transition:opacity .3s;cursor:pointer}
a:hover{opacity:.75}
::selection{background:transparent}
em,i{font-style:normal}
input,textarea,select,button{user-select:text;-webkit-user-select:text}

/* ── Scene ── */
#scene-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}
#scene-container canvas{display:block}

/* ═══════════ CRT noise — Pip-Boy phosphor screen ═══════════ */
.ov-vignette{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at center,transparent 35%,rgba(10,10,16,.88)100%);
}
/* Fine phosphor noise — high frequency, very subtle, electronic */
.ov-noise{
  position:fixed;top:-50%;left:-50%;width:200%;height:200%;
  pointer-events:none;z-index:9999;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:noise .15s steps(4) infinite;
}
@keyframes noise{
  0%{transform:translate(0,0)}
  25%{transform:translate(-1.5%,.8%)}
  50%{transform:translate(.7%,-1.2%)}
  75%{transform:translate(-0.5%,0.5%)}
}
/* CRT scanlines — faint horizontal lines */
.ov-scanlines{
  position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,.02) 2px,
    rgba(0,0,0,.02) 4px
  );
}

/* ═══════════ Logo (HTML overlay, fades on navigate) ═══════════ */
.hero-logo{
  position:fixed;z-index:15;
  top:50%;left:50%;transform:translate(-50%,-55%);
  width:clamp(120px,20vmin,220px);
  pointer-events:none;
  opacity:0;
  transition:opacity 1.2s cubic-bezier(.16,1,.3,1);
}
.hero-logo.visible{opacity:.8}
.hero-logo img{
  width:100%;height:auto;
  filter:drop-shadow(0 4px 24px rgba(0,0,0,.5)) drop-shadow(0 0 40px rgba(8,8,14,.6));
}

/* ═══════════ Tagline (centered, home only) ═══════════ */
.tagline{
  position:fixed;z-index:15;pointer-events:none;white-space:nowrap;
  top:calc(50% + clamp(65px,11vmin,110px));left:50%;transform:translateX(-50%);
  font-family:var(--fd);font-weight:300;text-transform:uppercase;
  letter-spacing:.18em;color:var(--t);
  font-size:clamp(.6rem,1.4vw,.9rem);
  text-shadow:0 1px 8px rgba(0,0,0,.6),0 0 20px rgba(8,8,14,.8);
  opacity:0;transition:opacity 1s cubic-bezier(.16,1,.3,1);
}
.tagline.visible{opacity:.75}

/* ═══════════ Navigation ═══════════ */
nav{
  position:fixed;z-index:100;bottom:clamp(1.5rem,4vh,3rem);left:50%;transform:translateX(-50%);
  display:flex;gap:clamp(1.5rem,4vw,3rem);
  background:rgba(8,8,14,.4);
  padding:.5rem clamp(1rem,2.5vw,2rem);
  border:1px solid rgba(255,255,255,.05);
  border-radius:10px;
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  overflow:hidden;
}
nav::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,transparent 50%,rgba(255,255,255,.01) 100%);
}
nav a{
  font-family:var(--fd);font-weight:300;
  font-size:.82rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--t-m);transition:color .4s;padding:.5rem 0;position:relative;
}
nav a::after{
  content:'';position:absolute;bottom:0;left:50%;width:0;height:1px;background:var(--o);
  transition:width .5s cubic-bezier(.16,1,.3,1),left .5s cubic-bezier(.16,1,.3,1);
}
nav a:hover{color:var(--t-s);opacity:1}
nav a.active{color:var(--t)}
nav a.active::after{width:100%;left:0}

/* ═══════════ Pages ═══════════ */
.page{
  position:fixed;inset:0;z-index:10;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;
  transition:opacity .3s ease;  /* out — disappear quickly */
}
.page.active{
  opacity:1;pointer-events:auto;
  transition:opacity .8s ease .3s;  /* in with slight delay */
}
.page-inner{
  max-width:600px;padding:clamp(1.5rem,4vw,2.5rem);
  background:rgba(8,8,14,.45);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  position:relative;
}
/* Glass sheen — diagonal light reflection */
.page-inner::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.045) 0%,transparent 40%,transparent 60%,rgba(255,255,255,.015) 100%);
}

/* Content reveal — all elements fade together */
.rv{opacity:0;transition:opacity .8s ease}
.page.active .rv{opacity:1;transition-delay:.5s}
/* Contact page: stagger the two panels */

/* ═══════════ Miji-verse (product page transforms) ═══════════ */
/* ═══════════ Miji page ═══════════ */
.miji-verse{
  background:rgba(8,8,15,.55);
  border-color:rgba(196,162,101,.1);
  text-align:center;
}
.miji-verse::before{
  background:linear-gradient(135deg,rgba(196,162,101,.04) 0%,transparent 50%,rgba(196,162,101,.015) 100%);
}
.m-greeting,.m-tagline,.m-desc{display:none} /* deprecated */

/* Miji hero — exact miji.one rendering */
.miji-hero{text-align:center;margin-bottom:1.2rem}
.miji-orb-wrap{display:flex;align-items:center;justify-content:center;margin-bottom:20px}
#miji-orb{width:120px;height:120px;border-radius:50%}
.miji-tagline{
  font-family:var(--fm);font-size:2.4rem;font-weight:300;
  letter-spacing:-.02em;line-height:1.15;color:#F5F5F8;
  margin-bottom:16px;
}
.miji-line1,.miji-line2{display:block}
.miji-line2{color:#C4A265}
.miji-subtitle{
  font-family:var(--fm);font-size:1.4rem;font-weight:300;
  letter-spacing:-.015em;line-height:1.25;color:#F0F0F4;
  margin-bottom:16px;
}
.miji-subtitle-line{display:block}
.miji-desc{
  font-family:var(--fm);font-size:.78rem;font-weight:300;
  color:rgba(232,232,236,.6);line-height:1.7;
  max-width:400px;margin:0 auto;
}
.m-link{font-family:var(--fm);font-weight:300;font-size:.78rem;letter-spacing:.1em;text-transform:lowercase;color:var(--gold);display:inline-flex;align-items:center;gap:.5rem}
.m-link:hover{color:var(--gold-d);opacity:1}
.m-link .arr{display:inline-block;transition:transform .3s}
.m-link:hover .arr{transform:translateX(4px)}

/* Scorecard — exact miji.one rendering */
.m-card-wrap{display:flex;justify-content:center;margin-bottom:1.4rem}
.share-card-mini{
  position:relative;flex:0 0 auto;width:160px;aspect-ratio:3/4;
  border-radius:14px;overflow:hidden;
  box-shadow:0 6px 28px rgba(0,0,0,.35);
  container-type:inline-size;
}
.share-card-bg{position:absolute;inset:0;width:100%;height:100%}
.share-card-watermark{
  position:absolute;top:14%;left:0;right:0;height:28%;z-index:0;
  overflow:visible;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}
.share-card-watermark span{
  font-family:var(--fm);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.06);
  white-space:nowrap;user-select:none;text-align:center;font-size:2.2rem;
}
.share-card-mini .share-card-content{
  position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;height:100%;
  padding:14px 10px;text-align:center;
}
.share-card-date{
  font-family:var(--fm);font-size:.56rem;font-weight:400;
  letter-spacing:.08em;color:rgba(255,255,255,.5);
  text-transform:lowercase;margin-bottom:auto;line-height:1.35;
}
.share-card-day{color:rgba(196,162,101,.55);font-weight:300;letter-spacing:.1em}
.share-card-score{
  position:relative;font-family:var(--fm);font-size:4.4rem;font-weight:300;
  line-height:1;letter-spacing:-.03em;margin-bottom:8px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.46) 0%,rgba(255,255,255,.08) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;color:rgba(255,255,255,.46);
}
.score-ring{
  position:absolute;width:1.2em;height:1.2em;border-radius:50%;
  pointer-events:none;
  border:.5px solid var(--ring-base,rgba(196,162,101,.06));
  box-shadow:0 0 12px var(--ring-glow,rgba(196,162,101,.04)),
              inset 0 0 8px var(--ring-glow,rgba(196,162,101,.02));
  filter:blur(.4px);animation:ringPulse 6s ease-in-out infinite;
  animation-delay:var(--glow-delay,0s);
}
@keyframes ringPulse{
  0%,100%{opacity:.5;transform:scale(1)}
  50%{opacity:1;transform:scale(1.02)}
}
[data-mood="good"]{
  --ring-base:rgba(196,162,101,.05);
  --ring-glow:rgba(196,162,101,.08);
  --curve-color:rgba(196,162,101,.08);
  --dot-glow:rgba(220,190,120,.12);
  --dot-bright:rgba(220,190,120,.35);
}
.share-card-curve{
  position:absolute;bottom:28%;left:10%;width:80%;height:16px;
  overflow:visible;opacity:1;z-index:0;
}
.curve-line{
  fill:none;stroke:var(--curve-color,rgba(196,162,101,.08));
  stroke-width:.6;stroke-linecap:round;filter:blur(.3px);
}
.curve-dot{
  r:1.8;fill:var(--dot-bright,rgba(220,190,120,.3));
  filter:blur(1px) drop-shadow(0 0 3px var(--dot-glow,rgba(220,190,120,.12)));
  offset-path:path('M0,20 C15,22 28,16 48,12 C60,9 70,14 85,8 C100,4 115,10 132,6 C145,3 152,8 160,4');
  animation:curveDot 10s linear infinite;
  animation-delay:var(--glow-delay,0s);
}
@keyframes curveDot{0%{offset-distance:0%}100%{offset-distance:100%}}
.share-card-observation{
  font-family:var(--fm);font-size:.52rem;font-weight:300;
  color:rgba(255,255,255,.5);line-height:1.45;margin-top:auto;
}
.share-card-brand{
  font-family:var(--fm);font-size:.5rem;font-weight:400;
  letter-spacing:.06em;color:rgba(196,162,101,.35);
  margin-top:6px;align-self:flex-end;
}

/* ═══════════ Research ═══════════ */
.r-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
  max-width:820px;width:100%;padding:0 clamp(1rem,3vw,2rem);
}
#research{align-items:center}
#research .page-inner{text-align:left;max-width:none;width:auto;padding:clamp(1rem,2vw,1.5rem)}
.r-wide{grid-column:1/-1}
.r-grid .rv:nth-child(1){transition-delay:.5s}
.r-grid .rv:nth-child(2){transition-delay:.65s}
.r-grid .rv:nth-child(3){transition-delay:.8s}
.r-grid .rv:nth-child(4){transition-delay:.95s}
.r-grid .rv:nth-child(5){transition-delay:1.1s}
.r-label{font-family:var(--fd);font-weight:300;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--o);margin-bottom:.15rem}
.r-title{font-family:var(--fd);font-weight:300;font-size:.72rem;color:var(--t);letter-spacing:.15em;text-transform:uppercase}
.r-desc{font-family:var(--fd);font-weight:300;font-size:.72rem;color:var(--t-s);line-height:1.7;margin-top:.15rem;text-align:justify}
.r-link{font-family:var(--fd);font-weight:300;font-size:.72rem;letter-spacing:.15em;text-transform:lowercase;color:var(--o);display:inline-flex;align-items:center;gap:.5rem;margin-top:.4rem}
.r-link:hover{opacity:.7}
.r-link .arr{display:inline-block;transition:transform .3s}
.r-link:hover .arr{transform:translateX(4px)}

/* ═══════════ Contact ═══════════ */
.c-duo{
  display:flex;flex-direction:column;gap:.6rem;
  max-width:520px;width:100%;padding:0 clamp(1rem,3vw,2rem);
}
#contact{align-items:center}
#contact .page-inner{text-align:left;max-width:none;width:auto;padding:clamp(1.2rem,2.5vw,2rem)}
.c-duo .rv:nth-child(2){transition-delay:.7s}
.c-heading{
  font-family:var(--fd);font-weight:300;font-size:.82rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--t);
  margin-bottom:clamp(1rem,2.5vh,1.5rem);
}
.c-form{display:flex;flex-direction:column;gap:0}
.c-field{position:relative;margin-bottom:1.2rem}
.c-field input,.c-field textarea,.c-field select{
  width:100%;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.1);
  color:var(--t);font-family:var(--fd);font-size:.82rem;
  padding:.6rem .8rem;outline:none;border-radius:8px;
  -webkit-appearance:none;appearance:none;
  transition:border-color .4s,background .4s;
}
.c-field input:focus,.c-field textarea:focus,.c-field select:focus{
  border-color:rgba(255,103,0,.4);background:rgba(255,255,255,.04);
}
.c-field input::placeholder,.c-field textarea::placeholder{color:var(--t-m)}
.c-field label{
  display:block;font-family:var(--fd);font-weight:300;font-size:.82rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--t-d);
  margin-bottom:.4rem;
}
.c-field textarea{resize:none;min-height:70px;line-height:1.6}
.c-field select{cursor:pointer;color:var(--t-d)}
.c-field select.has-value{color:var(--t)}
.c-field select option{background:var(--bg-s);color:var(--t)}
.c-submit{margin-top:.3rem}
.c-submit button{
  font-family:var(--fd);font-weight:300;font-size:.82rem;
  letter-spacing:.2em;text-transform:uppercase;
  background:rgba(255,103,0,.06);border:1px solid rgba(255,103,0,.25);
  color:var(--o);padding:.65rem 2rem;cursor:pointer;border-radius:8px;
  transition:all .3s;
}
.c-submit button:hover{background:rgba(255,103,0,.12);border-color:var(--o)}

.c-phone{font-family:var(--fd);font-weight:300;font-size:.82rem;color:var(--t-s);letter-spacing:.06em}
.c-phone a{color:inherit;text-decoration:none}
.c-phone-tag{font-family:var(--fd);font-weight:300;font-size:.82rem;letter-spacing:.15em;text-transform:uppercase;color:var(--o);display:block;margin-top:.8rem;margin-bottom:.15rem}
.c-addresses{margin-top:0}
.c-addr-block{margin-bottom:.8rem}
.c-addr-block:last-child{margin-bottom:0}
.c-addr-label{font-family:var(--fd);font-weight:300;font-size:.82rem;letter-spacing:.15em;text-transform:uppercase;color:var(--o);margin-bottom:.3rem}
.c-addr-text{font-family:var(--fd);font-weight:300;font-size:.82rem;color:var(--t-s);line-height:1.7}
.c-socials{display:flex;gap:1rem;margin-top:.2rem;align-items:center;justify-content:center}
.c-socials a{color:var(--t-d);display:flex;transition:color .3s}
.c-socials a:hover{color:var(--t-s);opacity:1}

/* ═══════════ Footer ═══════════ */
.footer{
  position:fixed;bottom:clamp(1.2rem,3vh,2rem);right:clamp(1.2rem,3vw,2.5rem);
  z-index:100;text-align:right;font-size:.5rem;letter-spacing:.08em;
  color:var(--t-m);line-height:1.7;opacity:.5;
}
.footer a{color:var(--t-m)}.footer a:hover{color:var(--t-d)}

.transition-flash{
  position:fixed;inset:0;z-index:50;background:var(--bg);
  opacity:0;pointer-events:none;
  transition:opacity .15s ease;
}
.transition-flash.active{opacity:.5}

/* ═══════════ Responsive ═══════════ */

/* Tablet */
@media(max-width:768px){
  nav{bottom:1rem;gap:1rem;padding:.45rem 1rem}
  nav a{padding:.6rem .2rem;min-height:44px;display:flex;align-items:center}
  .page-inner{
    max-width:90vw;padding:clamp(1.2rem,4vw,2rem);
    max-height:70vh;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .c-duo{padding:0 1rem}
  .hero-logo{width:clamp(160px,30vmin,260px)}
  .footer{display:none}
}

/* Phone */
@media(max-width:480px){
  /* Universal mobile size */
  nav a{font-size:.58rem;letter-spacing:.1em}
  nav{gap:.6rem;padding:.4rem .8rem}
  .tagline{font-size:.5rem;letter-spacing:.1em}
  .page-inner{padding:.8rem;border-radius:8px}
  /* All content text uniform */
  .r-label,.r-title,.r-desc{font-size:.58rem}
  .r-grid{grid-template-columns:1fr;padding:0 1rem;gap:.4rem;max-height:75vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  #research .page-inner{padding:.8rem}
  /* Contact compact */
  .c-duo{padding:0 1rem;gap:.4rem}
  #contact .page-inner{padding:.8rem}
  .c-heading{font-size:.58rem;margin-bottom:.35rem}
  .c-field{margin-bottom:.4rem}
  .c-field label{display:none}
  .c-field input,.c-field textarea,.c-field select{font-size:16px;padding:.4rem .55rem;border-radius:6px}
  .c-field textarea{min-height:32px}
  .c-submit{margin-top:.1rem}
  .c-submit button{padding:.4rem 1.2rem;font-size:.58rem;border-radius:6px}
  .c-phone,.c-phone-tag,.c-addr-label,.c-addr-text{font-size:.58rem}
  .c-addr-label{margin-bottom:.1rem}
  .c-addr-text{line-height:1.4}
  .c-socials{gap:.6rem;margin-top:.4rem}
  .c-socials svg{width:15px;height:15px}
  .hero-logo{width:clamp(100px,22vmin,160px)}
}

/* Short screens (landscape phones) */
@media(max-height:600px){
  .hero-logo{width:140px;transform:translate(-50%,-60%)}
  .tagline{top:calc(50% + 70px);font-size:.55rem}
  .page-inner{max-height:55vh;padding:1rem}
  nav{bottom:.8rem}
}

/* Safe area insets for notched devices */
@supports(padding: max(0px)){
  nav{padding-bottom:max(.5rem,env(safe-area-inset-bottom))}
  .page-inner{padding-bottom:max(1rem,env(safe-area-inset-bottom))}
}