/* =============== Onno — Global =============== */
:root {
  --bg: #000;
  --fg: #fff;
  --fg-dim: rgba(255,255,255,.75);
  --fg-mute: rgba(255,255,255,.6);
  --acc: #8b9cff;
  --ring: 0 0 0 3px rgba(139,156,255,.35);
}
html, body { background:#000; color:var(--fg); }
html { color-scheme: dark; }
* { box-sizing: border-box; }
img { max-width:100%; height:auto; }

/* A11y util */
.sr-only {
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}

/* =============== Header =============== */
.onno-header { position:sticky; top:0; z-index:40; background:rgba(0,0,0,.6); backdrop-filter: blur(8px); border-bottom:1px solid rgba(255,255,255,.08); }
.onno-header .onno-inner { display:flex; align-items:center; gap:16px; padding:12px 16px; max-width:1240px; margin:0 auto; }
.site-title { color:#fff; text-decoration:none; font-weight:700; letter-spacing:.02em; }
.onno-primary .onno-nav { display:flex; gap:18px; list-style:none; margin:0; padding:0; }
.onno-nav a { color:var(--fg-dim); text-decoration:none; padding:6px 8px; border-radius:8px; }
.onno-nav a:hover, .onno-nav a:focus { color:#fff; background:rgba(255,255,255,.06); outline: none; box-shadow: var(--ring); }
.onno-burger { margin-left:auto; display:none; border:1px solid rgba(255,255,255,.2); background:transparent; color:#fff; border-radius:10px; padding:6px 10px; }
@media (max-width: 960px){
  .onno-primary { display:none; }
  .onno-burger { display:inline-flex; }
}

/* Offcanvas */
.onno-offcanvas[hidden] { display:none; }
.onno-offcanvas .onno-offcanvas-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.55); }
.onno-offcanvas .onno-offcanvas-panel{ position:fixed; right:0; top:0; bottom:0; width:min(88vw,380px); background:#111; border-left:1px solid rgba(255,255,255,.08); padding:16px; overflow:auto; }
.onno-offcanvas .onno-nav-list{ list-style:none; padding:0; margin:0; }
.onno-offcanvas .onno-nav-list a{ display:block; padding:12px 10px; color:#fff; text-decoration:none; border-radius:8px; }

/* =============== Progress & Dots =============== */
#onno-progress { position:fixed; z-index:30; top:0; left:0; height:3px; width:100%; background:rgba(255,255,255,.08); }
#onno-progress > span { display:block; height:100%; width:0%; background:linear-gradient(90deg,#6ef3ff,#8b9cff); transform-origin:0 50%; transform:scaleX(0); will-change: transform; }

.onno-dots { position:fixed; right:16px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; z-index:30; }
.onno-dots .dot { width:10px; height:10px; border-radius:999px; border:1px solid rgba(255,255,255,.6); background:transparent; cursor:pointer; opacity:.8; transition:transform .2s, background-color .2s, opacity .2s; }
.onno-dots .dot.is-active { background:#fff; transform:scale(1.25); opacity:1; }
@media (max-width: 900px){ .onno-dots { right:8px; gap:8px; } }

/* =============== Sections =============== */
.onno-section { position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden; isolation:isolate; }
.onno-section .onno-bg { position:absolute; inset:0; background:#000 center/cover no-repeat; }
.onno-section .onno-bg::before{
  content:''; position:absolute; inset:0; background: var(--lqip) center/cover no-repeat; filter: blur(12px); transform: scale(1.02);
  opacity:.75; transition: opacity .5s ease;  /* blur-up */
}
.onno-section .onno-bg.is-loaded::before{ opacity:0; }
.onno-section .onno-overlay { position:absolute; inset:0; background: radial-gradient(120% 120% at 50% 60%, rgba(0,0,0,.05), rgba(0,0,0,.45) 55%, rgba(0,0,0,.75) 100%); mix-blend-mode:normal; pointer-events:none; }
.onno-section .onno-content{ position:relative; z-index:2; max-width:min(920px, 92vw); margin-inline:auto; padding: clamp(24px, 6vh, 64px) 16px; text-align:center; }
.onno-title { font-size: clamp(28px, 6vw, 64px); line-height:1.06; letter-spacing:-.01em; margin:0 0 .35em; }
.onno-text { font-size: clamp(16px, 2.2vw, 22px); color:var(--fg-dim); margin:0 auto 1.2em; max-width: 72ch; }
.onno-btn { display:inline-flex; align-items:center; gap:.55em; padding:12px 18px; background:#fff; color:#000; border-radius:999px; text-decoration:none; font-weight:600; }
.onno-btn:hover, .onno-btn:focus{ transform:translateY(-1px); box-shadow: 0 10px 30px rgba(255,255,255,.08); outline:none; }
.onno-btn.ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); }

/* Reveal */
.onno-section[data-reveal="true"] .onno-content{ opacity:0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.onno-section.is-visible .onno-content{ opacity:1; transform:none; }

/* Parallax (GPU) */
.onno-section[data-parallax="true"] .onno-bg{ will-change: transform; }

/* =============== Highlights =============== */
.onno-highlights .onno-bg { background:#000; }
.onno-highlights .ph-slides{ position:relative; }
.onno-highlights .ph-slide { display:none; }
.onno-highlights .ph-slide.is-active { display:block; }
.onno-highlights .ph-t { font-size: clamp(26px, 5.2vw, 48px); margin:.1em 0 .4em; }
.onno-highlights .ph-d { color:var(--fg-dim); margin:0 0 1em; }
.ph-ctrl { display:flex; gap:10px; justify-content:center; margin-top: 10px; }
.ph-prev,.ph-next{ border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:#fff; border-radius:999px; padding:10px 12px; cursor:pointer; }
.ph-prev .label,.ph-next .label{ /* sr-only via class */ }

/* =============== Methods Grid =============== */
.onno-methods .onno-content{ max-width:1100px; }
.onno-grid{ display:grid; gap:16px; }
.onno-grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.onno-grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.onno-grid.cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px){ .onno-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .onno-grid{ grid-template-columns: 1fr; } }
.onno-card{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px; text-align:left; }
.onno-card h3{ margin:.4em 0 .3em; font-size:20px; }
.onno-card p{ color:var(--fg-mute); margin:0; }
.onno-icon{ width:40px; height:40px; object-fit:contain; }

/* =============== Product Look (AR/360) =============== */
.onno-look .pl-head{ display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; margin-bottom: 10px; }
.pl-variants{ display:flex; gap:8px; }
.pl-variant{ border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:#fff; border-radius:999px; padding:8px 12px; cursor:pointer; }
.pl-variant.is-active{ background:#fff; color:#000; }
.pl-actions{ display:flex; gap:8px; align-items:center; }
.pl-actions [data-disabled="true"]{ opacity:.5; pointer-events:none; }
.pl-view{ margin-top: 16px; min-height: min(60svh, 60vh); display:grid; place-items:center; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:rgba(255,255,255,.02); }

/* model-viewer fill */
.pl-view model-viewer{ width:100%; height:min(70svh,70vh); outline:none; }

/* =============== Progression + Motion prefs =============== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* =============== Misc =============== */
html.js .no-js-only { display:none !important; }
.onno-overlay, .onno-bg::before { pointer-events:none; }

/* sr-only apuluokka */
.sr-only {
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}

/* Highlights-nuolien labelit ruudunlukijalle vain */
.onno-highlights .ph-prev .label,
.onno-highlights .ph-next .label { 
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}

/* Ikonit nuoliin (tarvitsee chev.svg:n teeman /assets/icons -kansioon) */
.onno-highlights .ph-prev::after,
.onno-highlights .ph-next::after {
  content:''; display:inline-block; width:28px; height:28px;
  mask: url('/wp-content/themes/astra-child-onno2/assets/icons/chev.svg') no-repeat center / contain;
  -webkit-mask: url('/wp-content/themes/astra-child-onno2/assets/icons/chev.svg') no-repeat center / contain;
  background:#fff;
}
.onno-highlights .ph-prev { transform: scaleX(-1); } /* vasen nuoli */

/* Footerin “Scroll to Top” tekstin korvaus ikonilla (jos käytössä Astra-scroll-top) */
a.ast-scroll-top {
  width:42px; height:42px; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(6px);
}
a.ast-scroll-top::after {
  content:''; display:block; width:18px; height:18px; margin:12px auto;
  mask: url('/wp-content/themes/astra-child-onno2/assets/icons/chev.svg') no-repeat center / contain;
  -webkit-mask: url('/wp-content/themes/astra-child-onno2/assets/icons/chev.svg') no-repeat center / contain;
  background:#fff; transform: rotate(90deg); /* nuoli ylös */
}