/* ========================================================================
   SALLY STÄD · IDENTITET & RÖRELSE
   REDIGERA: färger i style.css; rörelser, scen och ny layout i den här filen.
   Alla typsnitt är lokala. Inga animationstjänster eller externa bibliotek krävs.
   ======================================================================== */
@font-face { font-family:"Instrument Serif"; src:url("../fonts/InstrumentSerif-Regular.woff") format("woff"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Instrument Serif"; src:url("../fonts/InstrumentSerif-Italic.woff") format("woff"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Instrument Sans"; src:url("../fonts/InstrumentSans-Regular.woff") format("woff"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Instrument Sans"; src:url("../fonts/InstrumentSans-Bold.woff") format("woff"); font-weight:500 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Outfit"; src:url("../fonts/Outfit-Regular.woff") format("woff"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Outfit"; src:url("../fonts/Outfit-Bold.woff") format("woff"); font-weight:600 900; font-style:normal; font-display:swap; }

:root { --color-brand:#1c4a7c; --font-label:"Outfit",Arial,sans-serif; --container:1240px; }
html { scroll-padding-top:8rem; }
body { overflow-x:clip; }
h1,h2 { font-weight:400; letter-spacing:-.035em; color:var(--color-brand); }
h2 { font-size:clamp(2.8rem,4.3vw,4.2rem); line-height:1.06; }
h3 { font-family:var(--font-body); font-weight:700; font-size:1.1rem; letter-spacing:-.02em; }
h1 em,h2 em { font-weight:400; }
.eyebrow { font:400 .73rem/1.6 var(--font-label); letter-spacing:.17em; text-transform:uppercase; color:var(--color-brand); }
.lead { font-size:1.05rem; line-height:1.8; }
.section-head { gap:1.2rem; }
.btn { --btn-bg:var(--color-brand); min-height:3.4rem; font-size:.88rem; font-weight:700; border-radius:1.15rem .3rem 1.15rem .3rem; padding:1rem 1.4rem; gap:1.1rem; }
.btn span[aria-hidden] { font-size:1.3rem; line-height:.9; transition:transform .35s; }
.btn:hover span[aria-hidden] { transform:translate(2px,-2px); }
.btn--small { min-height:2.8rem; font-size:.8rem; }
.btn--ghost { --btn-bg:transparent; --btn-fg:var(--color-brand); box-shadow:inset 0 0 0 1px var(--color-brand); }
.btn--light { --btn-bg:var(--color-paper); --btn-fg:var(--color-brand); }
.text-link { font-size:.9rem; text-decoration-thickness:1px; text-underline-offset:.35em; }
.header-inner { min-height:7.5rem; }
.site-header.is-scrolled .header-inner { min-height:7.5rem; }
.logo img,.site-header.is-scrolled .logo img { width:140px; height:105px; object-fit:contain; }
.site-header .logo img { margin-block:0; }
.nav-list { gap:.6rem; }
.nav-list a { font-size:.84rem; font-weight:400; }
.nav-list a[aria-current="page"] { color:var(--color-brand); }
.nav-list a::after { height:1px; background:var(--color-brand); }
.site-header::before { background:color-mix(in srgb,var(--color-paper) 94%,transparent); }

/* Första vyn: en mjuk entré följd av en lugn, återkommande städsekvens. */
.motion-hero { padding-block:3.8rem 1.65rem; }
.motion-hero .hero-grid { grid-template-columns:1fr 1.05fr; align-items:center; gap:clamp(2rem,4vw,4.4rem); }
.motion-hero .hero-copy { gap:1.7rem; padding-block:1rem 2rem; }
.motion-hero .hero-title { font-size:clamp(4.3rem,6.8vw,7.1rem); line-height:1; max-width:100%; }
.title-line { display:block; overflow:hidden; padding-block:.08em; margin-block:-.08em; }
.title-line > span { display:block; }
.js .title-line > span { animation:title-rise 1.2s var(--ease-out) calc(var(--intro,0s) + .12s) both; }
.js .title-line:nth-child(2) > span { animation-delay:calc(var(--intro,0s) + .27s); }
@keyframes title-rise { from { transform:translateY(115%) rotate(3deg); } to { transform:none; } }
.hero-copy .lead { max-width:29rem; animation-delay:calc(var(--intro,0s) + .35s); }
.hero-copy .btn-row { align-items:center; gap:1.6rem; animation-delay:calc(var(--intro,0s) + .48s); }
.hero-details { display:flex; flex-wrap:wrap; gap:1rem; padding-top:.45rem; }
.hero-details > span { display:flex; align-items:center; gap:.45rem; font-size:.72rem; color:var(--color-ink-soft); }
.hero-details img { width:28px; }
.js .hero-enter,.js .hero-details { animation:rise-in 1s var(--ease-out) calc(var(--intro,0s) + .5s) both; }
.hero-visual { position:relative; margin-block:0 2rem; transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform .55s var(--ease-out); }
.scene-panel { position:relative; isolation:isolate; overflow:hidden; padding:1.9rem 1.5rem 1.5rem; border-radius:5.2rem .6rem 5.2rem .6rem; background:var(--color-brand); color:white; }
.js .scene-panel { animation:scene-enter 1.3s var(--ease-out) calc(var(--intro,0s) + .15s) both; }
@keyframes scene-enter { from { opacity:0; transform:translateY(36px) scale(.97); } to { opacity:1; transform:none; } }
.scene-heading { display:grid; gap:.45rem; padding-left:1.6rem; position:relative; z-index:1; }
.scene-heading .eyebrow { color:#dceefa; font-size:.65rem; letter-spacing:.15em; }
.scene-status { display:flex; align-items:center; gap:.45rem; font-size:.65rem; color:#dceefa; }
.scene-status i { width:5px; height:5px; border-radius:50%; background:#74b8e5; box-shadow:0 0 0 4px #74b8e51a; }
.scene-watermark { position:absolute; right:-95px; top:-100px; width:390px; height:390px; opacity:.09; z-index:-1; animation:watermark-turn 45s linear infinite; }
@keyframes watermark-turn { to { transform:rotate(360deg); } }
.room-scene { width:100%; height:auto; overflow:visible; }
.scene-panel .room-scene { margin:1.2rem 0 0; }
.scene-bottom { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.2rem 1.2rem .4rem; color:#dceefa; font-size:.65rem; }
.scene-pagination { display:flex; align-items:center; gap:5px; }
.scene-pagination i,.scene-pagination b { display:block; width:5px; height:5px; background:#ffffff55; border-radius:8px; }
.scene-pagination b { width:23px; background:#dceefa; }
.floating-note { position:absolute; bottom:-1.5rem; left:-1.5rem; display:flex; align-items:center; gap:.75rem; padding:1rem 1.25rem; background:var(--color-paper); border:1px solid #1c4a7c14; box-shadow:0 14px 40px #18111f12; border-radius:1.3rem .4rem 1.3rem .4rem; animation:note-float 6s ease-in-out infinite; }
.floating-note img { width:40px; }
.floating-note strong { display:block; font-size:.8rem; color:var(--color-brand); }
.floating-note span { font-size:.68rem; color:var(--color-ink-soft); }
@keyframes note-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
.hero-bottom { margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--color-line); display:flex; justify-content:space-between; align-items:center; gap:1rem; font-size:.65rem; color:var(--color-ink-soft); }
.hero-bottom p span { margin-inline:.5rem; }
.scroll-cue { display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.scroll-cue-line { display:block; width:1px; height:25px; background:var(--color-line); position:relative; overflow:hidden; }
.scroll-cue-line::after { content:""; position:absolute; inset:0; background:var(--color-brand); animation:scroll-down 2s ease-in-out infinite; }
@keyframes scroll-down { from { transform:translateY(-100%); } to { transform:translateY(100%); } }

/* SVG-sekvens. Skrapan och imman delar samma tidskurva. */
.scene-panel .window-fog { animation:glass-clear 9s cubic-bezier(.65,0,.35,1) infinite; }
.scene-panel .squeegee { animation:window-wipe 9s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes glass-clear { 0%,10% { clip-path:inset(0 0 0 0); } 58%,88% { clip-path:inset(0 0 0 100%); } 100% { clip-path:inset(0 0 0 0); } }
@keyframes window-wipe { 0%,7% { transform:translateX(108px); opacity:0; } 12% { opacity:1; } 58% { transform:translateX(406px); opacity:1; } 64%,100% { transform:translateX(406px); opacity:0; } }
.scene-plant { transform-box:fill-box; transform-origin:bottom center; animation:plant-sway 7s ease-in-out infinite; }
@keyframes plant-sway { 0%,100% { transform:rotate(-1.3deg); } 50% { transform:rotate(1.3deg); } }
.scene-panel .scene-dust { animation:dust-clear 9s ease-in-out infinite; }
@keyframes dust-clear { 0%,20%,100% { opacity:.7; } 65%,88% { opacity:0; } }
.scene-stars { transform-box:fill-box; transform-origin:center; }
.scene-panel .scene-stars { animation:scene-sparkle 9s ease-in-out infinite; }
@keyframes scene-sparkle { 0%,53%,95%,100% { opacity:0; } 65%,83% { opacity:1; } }

/* Band och tjänster. Originalikoner från Sallys grafiska profil. */
.marquee { background:var(--color-paper); border-block:1px solid var(--color-line); padding-block:1.35rem; }
.marquee::before,.marquee::after { display:none; }
.marquee-group { gap:3rem; padding-right:3rem; }
.marquee-group li { font:400 1.3rem/1.2 var(--font-display); color:var(--color-brand); gap:3rem; }
.marquee-group li::after { background:var(--color-sky); width:6px; height:6px; border-radius:50%; clip-path:none; }
.marquee-track { animation-duration:36s; }
.services-section { background:var(--color-paper); }
.service-row { position:relative; grid-template-columns:64px minmax(0,1fr) auto; gap:1rem 1.5rem; padding:1.45rem .4rem; }
.service-icon { grid-column:1; grid-row:1 / 3; width:60px; transition:transform .5s var(--ease-out); }
.service-row h3 { font:400 clamp(1.7rem,2.4vw,2.25rem)/1.2 var(--font-display); color:var(--color-brand); grid-row:1; grid-column:2; }
.service-row p { grid-column:2; grid-row:2; font-size:.85rem; }
.service-row:hover { background:#dceefa55; padding-inline:1rem; }
.service-row:hover .service-icon { transform:translateY(-4px) rotate(-6deg); }
.service-arrow { margin-left:.65rem; }
.detail-icon { margin-bottom:1.2rem; }
.service-detail .detail-icon { transition:transform .4s var(--ease-out); }
.service-detail:hover .detail-icon { transform:rotate(-5deg) translateY(-4px); }
.steps { gap:2.5rem; }
.steps h3 { font-size:1.05rem; }
.steps p { font-size:.93rem; }
.steps li::before { font:400 1.5rem/1 var(--font-display); background:var(--color-mist); color:var(--color-brand); border:1px solid var(--color-line); border-radius:1.1rem .2rem; }
.point-list p { font-size:.95rem; }

/* Scrollscen: naturlig scroll, tre kapitel, fast bild bara på breda skärmar. */
.clean-story { background:#dceefa; }
.story-grid { display:grid; grid-template-columns:1.25fr .8fr; gap:clamp(3rem,8vw,8rem); align-items:start; }
.story-visual { position:sticky; top:8.5rem; }
.story-visual h2 { margin-top:1.2rem; font-size:clamp(2.6rem,4vw,3.9rem); }
.story-scene { margin-top:1.8rem; background:#dceefa; border-radius:3rem .3rem 3rem .3rem; padding:1rem .7rem .9rem; }
.story-scene .room-scene { max-height:350px; }
.story-scene-footer { display:flex; gap:1rem; justify-content:space-between; align-items:center; padding:.2rem 1rem; color:var(--color-brand); font-size:.6rem; }
.story-meter { flex:0 0 70px; height:2px; background:#1c4a7c22; overflow:hidden; }
.story-meter i { display:block; height:100%; width:100%; background:var(--color-brand); transform:scaleX(var(--story-progress,1)); transform-origin:left; }
.story-hint { margin-top:1rem; font-size:.68rem; color:var(--color-ink-soft); }
.story-hint span { display:inline-block; margin-left:.5rem; }
.story-step { min-height:52vh; display:flex; flex-direction:column; justify-content:center; padding-block:4rem; border-top:1px solid #1c4a7c25; position:relative; transition:opacity .5s; }
.story-step:first-child { margin-top:5rem; }
.story-step:last-child { margin-bottom:7rem; }
.story-step::before { content:""; position:absolute; top:-1px; left:0; right:0; height:2px; background:var(--color-brand); transform:scaleX(0); transform-origin:left; transition:transform .65s var(--ease-out); }
.story-step.is-active::before { transform:scaleX(1); }
.story-number { font:400 .72rem/1.5 var(--font-label); letter-spacing:.1em; text-transform:uppercase; color:var(--color-brand); margin-bottom:1.3rem; }
.story-step h3 { font:400 2.5rem/1.1 var(--font-display); color:var(--color-brand); margin-bottom:1.2rem; }
.story-step p { color:var(--color-ink-soft); font-size:.98rem; line-height:1.85; }
.story-step .text-link { margin-top:1.4rem; color:var(--color-brand); }
.story-scene .window-fog { clip-path:inset(0 0 0 var(--clean,100%)); }
.story-scene .squeegee { transform:translateX(var(--squeegee-x,406px)); opacity:var(--squeegee-opacity,0); }
.story-scene .scene-dust { opacity:var(--dust,0); }
.story-scene .scene-stars { opacity:var(--shine,1); }

.rut-section { background:var(--color-brand); color:var(--color-paper); position:relative; overflow:hidden; }
.rut-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:6rem; align-items:center; }
.rut-art { display:grid; place-items:center; aspect-ratio:1; position:relative; }
.rut-art img { position:absolute; width:100%; height:100%; opacity:.14; animation:watermark-turn 60s linear infinite; }
.rut-art span { font:400 clamp(2.8rem,5vw,5rem)/1.05 var(--font-display); position:relative; }
.rut-copy h2 { color:var(--color-paper); margin:1.3rem 0 1.5rem; font-size:clamp(2.7rem,4vw,4rem); }
.rut-copy .eyebrow { color:var(--color-sky); }
.rut-copy p:not(.eyebrow) { color:#dceefa; max-width:32rem; font-size:.95rem; line-height:1.9; }
.rut-copy .btn { margin-top:1.6rem; }
.section--soap { background:var(--color-paper); }
.cta-band { padding-block:1rem; }
.site-footer { background:var(--color-ink); padding-bottom:5rem; }
.site-footer h2 { font-family:var(--font-body); font-size:1rem; font-weight:700; color:var(--color-paper); letter-spacing:0; }
.site-footer .logo img { width:150px; height:auto; }
.page-hero { position:relative; overflow:hidden; background:#dceefa; }
.page-hero > .container { position:relative; z-index:1; }
.page-hero::after { content:""; position:absolute; width:380px; height:380px; right:4vw; top:-60px; background:url("../img/logo-ikon.svg") center/contain no-repeat; opacity:.045; animation:watermark-turn 60s linear infinite; pointer-events:none; }
.page-hero h1 { font-size:clamp(3.5rem,6vw,5.4rem); }
.choice span { transition:background .25s,border-color .25s,transform .25s; }
.choice:hover span { transform:translateY(-2px); }

/* Synlig kontroll pausar alla dekorativa loopar. Valet sparas lokalt. */
.motion-toggle { position:fixed; z-index:48; bottom:1rem; right:1rem; display:inline-flex; align-items:center; gap:.5rem; padding:.65rem .85rem; background:var(--color-paper); color:var(--color-brand); border:1px solid #1c4a7c30; border-radius:999px; box-shadow:0 4px 18px #18111f08; cursor:pointer; font:400 .65rem/1.2 var(--font-body); }
.motion-toggle svg { width:11px; height:11px; }
.menu-open .motion-toggle { visibility:hidden; }
html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after { animation-play-state:paused !important; }
html.motion-paused .hero-copy .lead,html.motion-paused .hero-copy .btn-row,html.motion-paused .hero-enter,html.motion-paused .hero-details,html.motion-paused .scene-panel { opacity:1; transform:none; animation:none; }
html.motion-paused .title-line > span { transform:none; animation:none; }
html.motion-paused .hero-visual { transform:none; }
html.motion-paused [data-reveal],html.motion-paused .split-word > span { opacity:1; transform:none; transition:none; }
html.motion-paused .page-curtain,html.motion-paused.has-curtain body::after { display:none; }
html.motion-paused .story-step { opacity:1; }
.scene-is-offscreen * { animation-play-state:paused !important; }
html.page-is-hidden *,html.page-is-hidden *::before,html.page-is-hidden *::after { animation-play-state:paused !important; }

@media(min-width:1000px) {
  .services-section .section-head { display:grid; grid-template-columns:1fr 1fr; max-width:none; column-gap:6rem; }
  .services-section .section-head .eyebrow { grid-column:1/-1; }
  .services-section .section-head .lead { align-self:end; justify-self:end; max-width:30rem; }
}
@media(max-width:1000px) {
  .motion-hero .hero-grid { gap:2rem; }
  .motion-hero .hero-title { font-size:clamp(3.7rem,7vw,5.8rem); }
  .floating-note { left:-.6rem; padding:.7rem .8rem; }
  .floating-note strong { font-size:.7rem; }
  .scene-panel { padding:1.5rem 1rem; border-top-left-radius:3rem; border-bottom-right-radius:3rem; }
  .story-grid { gap:3rem; }
  .rut-layout { gap:3rem; }
}
@media(max-width:860px) {
  .logo img,.site-header.is-scrolled .logo img { width:140px; height:105px; }
  .header-inner { min-height:7.5rem; }
  .nav-list a { font:400 clamp(2.3rem,6vw,3.3rem)/1.3 var(--font-display); }
  .nav-list a[aria-current="page"] { color:var(--color-sky); }
  .motion-hero { padding-top:2rem; }
  .motion-hero .hero-grid { grid-template-columns:1fr; gap:2rem; }
  .motion-hero .hero-copy { max-width:39rem; padding-block:.5rem 0; }
  .motion-hero .hero-title { font-size:clamp(3.8rem,11.5vw,6.5rem); }
  .hero-visual { width:100%; max-width:590px; justify-self:center; margin:1rem 0 2rem; }
  .scene-panel { padding:1.8rem 1.5rem 1.2rem; }
  .scene-panel .room-scene { margin-top:.4rem; }
  .floating-note { left:.7rem; }
  .hero-bottom { margin-top:.7rem; font-size:.6rem; }
  .hero-bottom p { text-align:right; max-width:13rem; }
  .story-grid { grid-template-columns:1fr; gap:1.8rem; }
  .story-visual { position:relative; top:auto; }
  .story-visual h2 { max-width:32rem; }
  .story-scene { max-width:590px; }
  .story-step { min-height:0; padding-block:2rem; opacity:1; }
  .story-step:first-child { margin-top:0; }
  .story-step:last-child { margin-bottom:0; }
  .story-step h3 { font-size:2rem; }
  .story-hint { display:none; }
  .rut-layout { grid-template-columns:1fr; gap:1rem; }
  .rut-art { display:none; }
  .page-hero::after { right:-120px; }
}
@media(max-width:600px) {
  .hero-copy .btn-row { gap:1.2rem; }
  .hero-copy .lead { font-size:.95rem; }
  .hero-details { gap:.65rem; }
  .hero-details > span { font-size:.63rem; }
  .scene-heading { padding-left:.5rem; }
  .scene-bottom { padding-inline:.4rem; font-size:.59rem; }
  .floating-note strong { font-size:.7rem; }
  .floating-note span { font-size:.61rem; }
  .service-row { grid-template-columns:42px minmax(0,1fr); gap:.6rem 1rem; }
  .service-icon { width:42px; grid-row:1 / 4; }
  .service-row h3 { font-size:1.7rem; }
  .service-row p { font-size:.8rem; }
  .service-row:hover { padding-inline:.4rem; }
  .service-arrow { width:1.2rem; height:1.2rem; }
  .page-hero h1 { font-size:3.3rem; }
  .motion-toggle { bottom:.65rem; right:.65rem; }
}
@media(max-width:360px) {
  .hero-copy .btn-row { align-items:flex-start; flex-direction:column; }
  .motion-hero .hero-title { font-size:3.5rem; }
  .scene-panel { padding-inline:.8rem; }
  .scene-heading .eyebrow { font-size:.57rem; }
  .hero-details { display:grid; }
}

/* Statisk reserv: även utan JavaScript och vid minskad rörelse är allt läsbart. */
html.reduce-motion .title-line > span { transform:none; animation:none; }
html.reduce-motion .hero-copy .lead,html.reduce-motion .hero-copy .btn-row,html.reduce-motion .hero-enter,html.reduce-motion .hero-details,html.reduce-motion .scene-panel { opacity:1; transform:none; animation:none; }
html.reduce-motion .window-fog,html.reduce-motion .scene-dust,html.reduce-motion .squeegee { opacity:0 !important; }
html.reduce-motion .scene-stars { opacity:1; }
html.reduce-motion .story-visual { position:relative; top:auto; }
html.reduce-motion .story-step { min-height:0; margin:0; padding-block:2.5rem; }
html.reduce-motion .story-hint { display:none; }
html.reduce-motion .hero-visual { transform:none !important; }
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; transition-duration:.01ms !important; }
  .title-line > span,.scene-panel,.hero-copy .lead,.hero-copy .btn-row,.hero-enter,.hero-details { opacity:1 !important; transform:none !important; }
  .window-fog,.squeegee,.scene-dust { opacity:0 !important; }
}
@media print {
  .motion-toggle,.scroll-cue,.hero-visual,.story-scene,.story-hint,.page-curtain { display:none; }
  [data-reveal],.split-word > span { opacity:1 !important; transform:none !important; }
  .story-visual { position:static; }
  .story-step { min-height:0; margin:0; }
}