/* rum.css — the room template: title + short description, an animation stage
   (left) with text (right), a summary slide with three perspective pills,
   then "læs mere" text for Google and for mobile. Same shape in every room. */
.rum-hero { padding: calc(var(--ug-space-3xl)) 0 var(--ug-space-2xl); }
.rum-hero__row { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem 2rem; }
.rum-hero h1 { max-width: 18ch; }
.rum-hero .lede { margin-top: .75rem; }
.rum-hero__pakker { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-left: auto; }
.rum-hero__pakker .lab { font-size: var(--ug-text-xs); letter-spacing: var(--ug-tracking-label); text-transform: uppercase; color: var(--ug-text-faint); font-family: var(--ug-mono); margin-right: .25rem; }

/* animation stage */
.stage { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0; border-radius: var(--ug-radius-l); overflow: hidden; border: 1px solid var(--ug-border-quiet); box-shadow: var(--ug-shadow-pop); background: var(--ug-surface); min-height: min(62vh, 36rem); }
.stage__anim { position: relative; background: var(--ug-brand); color: var(--ug-on-brand); display: grid; place-items: center; overflow: hidden; }
.stage__anim::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 120%, rgba(255,255,255,.14), transparent 60%); }
.stage__scene { position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; opacity: 0; transform: scale(.96); transition: opacity .55s var(--ug-ease), transform .55s var(--ug-ease); pointer-events: none; }
.stage__scene.is-on { opacity: 1; transform: none; pointer-events: auto; }
.stage__scene .ill { width: min(68%, 22rem); height: auto; }
.stage__scene.is-on .ill .l { stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 1.6s var(--ug-ease) forwards; }
.stage__scene.is-on .ill .pop { transform-origin: center; animation: pop .5s var(--ug-ease) .9s both; }
.stage__scene.is-on .ill .pop2 { transform-origin: center; animation: pop .5s var(--ug-ease) 1.3s both; }
.stage__scene.is-on .ill .pop3 { transform-origin: center; animation: pop .5s var(--ug-ease) 1.7s both; }
.stage__scene.is-on .ill .pulse { transform-origin: center; animation: pulse 1.6s ease-in-out 1.2s infinite; }
.stage__scene--sum { padding: 2rem 2.5rem; align-content: center; text-align: center; }
.stage__scene--sum h3 { color: var(--ug-on-brand); font-size: var(--ug-display-s); font-weight: var(--ug-weight-light); max-width: 30ch; margin-inline: auto; }
.stage__scene--sum p { color: var(--ug-on-brand-quiet); max-width: 48ch; margin: .75rem auto 1.25rem; }
.stage__scene--sum .pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.stage__scene--sum .pill { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.35); opacity: 0; transform: translateY(8px); animation: rise .45s var(--ug-ease) forwards; }
.stage__scene--sum .pill:nth-child(1) { animation-delay: .3s; } .stage__scene--sum .pill:nth-child(2) { animation-delay: .55s; } .stage__scene--sum .pill:nth-child(3) { animation-delay: .8s; }
.stage__scene--sum .pill:hover, .stage__scene--sum .pill.is-active { background: var(--c); border-color: var(--c); }
.stage__text { padding: 2rem 2.25rem; display: grid; align-content: space-between; gap: 1.5rem; }
.stage__step { font-family: var(--ug-mono); font-size: var(--ug-text-s); color: var(--ug-text-faint); letter-spacing: var(--ug-tracking-label); text-transform: uppercase; }
.stage__h { font-size: var(--ug-display-s); font-weight: var(--ug-weight-light); color: var(--ug-brand-strong); margin: .35rem 0 .6rem; transition: opacity .3s; }
.stage__p { color: var(--ug-text-quiet); font-size: var(--ug-text-l); transition: opacity .3s; }
.stage__text.is-fading .stage__h, .stage__text.is-fading .stage__p { opacity: 0; }
.stage__ctrl { display: flex; align-items: center; gap: .5rem; }
.stage__dots { display: flex; gap: .4rem; margin-right: auto; }
.stage__dot { width: 2.25rem; height: .35rem; border-radius: var(--ug-radius-pill); background: var(--ug-border); border: 0; cursor: pointer; padding: 0; position: relative; overflow: hidden; }
.stage__dot::after { content: ""; position: absolute; inset: 0; background: var(--ug-brand); transform: scaleX(0); transform-origin: left; }
.stage__dot.is-done::after { transform: scaleX(1); }
.stage__dot.is-on::after { animation: bar var(--dur, 6s) linear forwards; }
.stage.is-paused .stage__dot.is-on::after { animation-play-state: paused; }
.stage__btn { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--ug-border); background: var(--ug-surface); color: var(--ug-brand-strong); cursor: pointer; display: grid; place-items: center; padding: 0; }
.stage__btn:hover { background: var(--ug-brand-quiet); }
.stage__btn svg { width: 1rem; height: 1rem; }
.stage__btn .ico-pause { display: none; }
.stage:not(.is-paused):not(.is-done) .stage__btn--play .ico-play { display: none; }
.stage:not(.is-paused):not(.is-done) .stage__btn--play .ico-pause { display: block; }
@media (max-width: 860px) {
  .stage { grid-template-columns: 1fr; min-height: 0; }
  .stage__anim { aspect-ratio: 4 / 3; }
  .stage__text { padding: 1.25rem 1.25rem 1.5rem; }
}

/* after the stage: three doors (læs mere / standkort / kontakt) */
.rum-exits { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; align-items: center; }
.rum-exits .spacer { flex: 1; }

/* perspective summary */
.rum-persp { padding: var(--ug-space-5xl) 0 var(--ug-space-3xl); }
.rum-persp .section__head h2 { max-width: 20ch; }

/* furniture in the room */
.moebel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.moebel { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; padding: 1.1rem 1.2rem; border-radius: var(--ug-radius-l); border: 1px solid var(--ug-border-quiet); background: var(--ug-surface); box-shadow: var(--ug-shadow); scroll-margin-top: 5rem; }
.moebel__ico { width: 2.75rem; height: 2.75rem; border-radius: var(--ug-radius); background: var(--ug-brand-quiet); color: var(--ug-brand-strong); display: grid; place-items: center; }
.moebel__ico svg { width: 1.5rem; height: 1.5rem; }
.moebel h3 { font-size: var(--ug-text-xl); font-weight: var(--ug-weight-bold); letter-spacing: 0; margin-bottom: .2rem; }
.moebel p { color: var(--ug-text-quiet); font-size: var(--ug-text-m); margin-bottom: .6rem; }
.moebel__tilkoeb { font-size: var(--ug-text-s); color: var(--ug-text-faint); margin-bottom: .6rem; }
.moebel__meta { display: flex; flex-wrap: wrap; gap: .3rem; }
.moebel__link { font-size: var(--ug-text-m); font-weight: var(--ug-weight-semibold); margin-bottom: .6rem; }
.moebel--tilkoeb .moebel__ico { background: var(--ug-accent-quiet); color: var(--ug-accent-40); }

/* demo door inside a room */
.demo-doer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem; padding: 1.25rem 1.5rem; border-radius: var(--ug-radius-l); background: var(--ug-accent-quiet); border: 1px solid var(--ug-accent-line); }
.demo-doer__ico { width: 3rem; height: 3rem; border-radius: var(--ug-radius); background: var(--ug-accent-60); color: var(--ug-on-accent); display: grid; place-items: center; }
.demo-doer__ico svg { width: 1.5rem; height: 1.5rem; }
.demo-doer h3 { font-size: var(--ug-text-xl); font-weight: var(--ug-weight-bold); letter-spacing: 0; color: var(--ug-text); }
.demo-doer p { color: var(--ug-text-quiet); font-size: var(--ug-text-m); }
@media (max-width: 640px) { .demo-doer { grid-template-columns: 1fr; } }

/* news board (entré) */
.tavle { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.tavle__item { display: grid; gap: .35rem; padding: 1.2rem 1.3rem; border-radius: var(--ug-radius-l); background: var(--ug-surface); border: 1px solid var(--ug-border-quiet); box-shadow: var(--ug-shadow); text-decoration: none; color: inherit; transition: transform .15s var(--ug-ease), box-shadow .15s; position: relative; }
.tavle__item::before { content: ""; position: absolute; top: -.45rem; left: 50%; width: .9rem; height: .9rem; border-radius: 50%; background: var(--ug-accent-60); transform: translateX(-50%); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.tavle__item:hover { transform: translateY(-2px) rotate(-.4deg); box-shadow: var(--ug-shadow-pop); color: inherit; }
.tavle__meta { display: flex; gap: .6rem; font-size: var(--ug-text-s); color: var(--ug-text-faint); font-family: var(--ug-mono); }
.tavle__meta b { color: var(--ug-brand-strong); font-weight: var(--ug-weight-semibold); }
.tavle__item h3 { font-size: var(--ug-text-xl); font-weight: var(--ug-weight-bold); letter-spacing: 0; color: var(--ug-text); }
.tavle__item p { color: var(--ug-text-quiet); font-size: var(--ug-text-m); }
@media (max-width: 760px) { .tavle { grid-template-columns: 1fr; } }

/* room cards (entré "standkortet") */
.rum-kort { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.rum-kort a { display: grid; gap: .5rem; padding: 1.25rem 1.3rem 1.35rem; border-radius: var(--ug-radius-l); background: var(--ug-surface); border: 1px solid var(--ug-border-quiet); text-decoration: none; color: inherit; box-shadow: var(--ug-shadow); transition: transform .15s var(--ug-ease), box-shadow .15s, border-color .15s; }
.rum-kort a:hover { transform: translateY(-3px); box-shadow: var(--ug-shadow-pop); border-color: var(--ug-brand-line); color: inherit; }
.rum-kort .ico { width: 2.5rem; height: 2.5rem; border-radius: var(--ug-radius); background: var(--ug-brand); color: #fff; display: grid; place-items: center; }
.rum-kort .ico svg { width: 1.35rem; height: 1.35rem; }
.rum-kort h3 { font-size: var(--ug-text-xl); font-weight: var(--ug-weight-bold); letter-spacing: 0; }
.rum-kort p { color: var(--ug-text-quiet); font-size: var(--ug-text-m); }
.rum-kort a.is-demo .ico { background: var(--ug-accent-60); color: var(--ug-on-accent); }
.rum-kort a.is-butler .ico { background: var(--ug-accent-60); color: var(--ug-on-accent); }
.rum-kort a.is-butler { border-color: var(--ug-accent-line); }
.rum-kort a.is-tilbyg { border-style: dashed; border-color: var(--ug-brand-line); }
.rum-kort a.is-pwa .ico { background: var(--ug-warning); color: var(--ug-brand-10); }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }