/* Eros Chat landing – "Det du ikke sier høyt."
   A steamed-up mirror you wipe with your finger, frosted rooms, whispers that type themselves.
   Palette: violet night that glows (never black), hot pink for desire, peach for skin warmth. */

:root {
  --natt: #2A0B46;          /* deepest tone: saturated violet, not black */
  --fiol: #4B1680;
  --orkide: #7B2FE0;
  --lilla: #CDB0FF;
  --dis: #F5ECFF;           /* light sections */
  --rosa: #FF3F9E;          /* desire: CTAs, accents */
  --rosa-dyp: #D81B7A;
  --fersken: #FFB8A0;
  --sno: #FFF6FC;
  --ink: #23103A;
  --ink-soft: #5E4878;

  --serif: 'Caprasimo', Georgia, serif;
  --serif-em: var(--serif);
  --serif-weight: 400;
  --em-weight: 400;
  --title-scale: .9;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(16px, 4.5vw, 64px);
  --page: 1280px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --pop: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; overflow-x: hidden;
  font: 400 clamp(16px, 1vw + 10px, 19px)/1.6 var(--sans);
  color: var(--ink); background: var(--natt);
}
img, canvas { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--serif); font-weight: var(--serif-weight); line-height: .98; margin: 0; letter-spacing: -.02em; font-variation-settings: 'opsz' 96; }
h2 { font-size: clamp(40px, 5.6vw, 84px); }
h1 em, h2 em { font-family: var(--serif-em); font-style: italic; font-weight: var(--em-weight); color: var(--rosa); }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--sno); color: var(--ink); padding: 10px 14px; border-radius: 10px; }
.skip:focus { top: 12px; }
.kicker { font: 800 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--fersken); margin-bottom: 20px; }
.kicker--dark { color: var(--rosa-dyp); }
.mirror .kicker { text-shadow: 0 1px 10px rgba(42, 11, 70, .7), 0 0 2px rgba(42, 11, 70, .5); }   /* stays readable on the light fog */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 16px/1 var(--sans); text-decoration: none; white-space: nowrap;
  transition: transform .3s var(--pop), box-shadow .3s, background .25s, color .25s;
}
.btn--hot {
  color: #fff;
  background: linear-gradient(120deg, #FF5FAE, var(--rosa) 45%, #C21E8A);
  box-shadow: 0 12px 34px -10px rgba(255, 63, 158, .8), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.btn--hot:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(255, 63, 158, .95), inset 0 1px 0 rgba(255, 255, 255, .4); }
.btn--line { color: var(--sno); background: rgba(255, 246, 252, .08); box-shadow: inset 0 0 0 1.5px rgba(255, 246, 252, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn--line:hover { background: rgba(255, 246, 252, .2); transform: translateY(-2px); }
.btn--soft { color: var(--ink); background: #EFE3FF; }
.btn--soft:hover { background: var(--lilla); }
.btn--small { min-height: 40px; padding: 0 18px; font-size: 14px; }
.btn--big { min-height: 58px; padding: 0 32px; font-size: 17px; }

/* ---------- Nav ---------- */
.nav {
  position: absolute; z-index: 20; inset: 0 0 auto 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px var(--gutter); color: var(--sno);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
/* The logo: script "Eros" with CHAT along its ribbon (img/logo-eros-chat-hvit.svg, aspect 1.77; white so it holds on the light pink fog). */
.brand__logo { display: block; height: 72px; width: auto; }
.brand__age { font: 800 11px/1 var(--sans); letter-spacing: .06em; padding: 5px 7px; border-radius: 6px; color: var(--natt); background: var(--fersken); }
.nav__links { display: flex; gap: 10px; }

/* ---------- Hero: the mirror ---------- */
.mirror {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(100svh, 640px);
  display: grid; align-items: end;
  padding: 120px var(--gutter) clamp(48px, 8vh, 96px);
  color: var(--sno);
  background: var(--fiol);
  /* The page does not scroll, so a finger moving any way wipes the fog (pinch zoom still works). */
  touch-action: pinch-zoom;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='17' fill='none' stroke='white' stroke-opacity='.8' stroke-width='1.5'/%3E%3Ccircle cx='20' cy='20' r='2.5' fill='white'/%3E%3C/svg%3E") 20 20, crosshair;
}
.mirror__photo { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.mirror__fog { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; }
/* Until the fog is drawn, the photo hides behind a CSS blur, so nothing is revealed early. */
.mirror:not(.is-fogged) .mirror__photo { filter: blur(30px) brightness(1.2) saturate(1.2); transform: scale(1.1); }
.mirror__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* The first layer keeps the corner behind the 3D logo equally dim on every screen size, so its
     shadow looks the same on a phone, a tablet and a desktop. */
  background:
    radial-gradient(ellipse 360px 230px at 0 0, rgba(42, 11, 70, .55), transparent 72%),
    linear-gradient(90deg, rgba(42, 11, 70, .78) 0%, rgba(42, 11, 70, .45) 34%, transparent 62%),
    linear-gradient(0deg, rgba(42, 11, 70, .55), transparent 40%),
    linear-gradient(180deg, rgba(42, 11, 70, .45), transparent 22%);
}
.mirror__copy { position: relative; max-width: 620px; pointer-events: none; }
.mirror__copy > * { pointer-events: auto; }
.mirror__title { font-size: calc(clamp(52px, 8vw, 124px) * var(--title-scale)); margin-bottom: 22px; text-shadow: var(--title-glow, none); filter: drop-shadow(0 4px 24px rgba(42, 11, 70, .55)); }

/* The heading sheen (app.js): when a section comes into view, a faint ring of light glides up
   through its headings, like light catching glass. Each text stays visible in its own colour (--final); the
   ring is painted over it with background-clip: text, and the class is removed when it is done.
   On violet the sheen is lilac, peach and cream; on the light sections a deeper violet, so it
   never washes dark text out. */
@property --sweep { syntax: '<length>'; inherits: false; initial-value: 0px; }
/* The sheen's palette ("Fersken"): --sheen-* on violet, --sheen-*-l on the light sections and a
   stronger --sheen-*-s pair for the hero's lead, where small text would hide a softer one. */
:root {
  --sheen-edge: #FFCDC2; --sheen-peak: #FFE2DD;
  --sheen-edge-l: #652A37; --sheen-peak-l: #823B3C;
  --sheen-edge-s: #FF9A7A; --sheen-peak-s: #FFC4AE;
  --ring-edge: var(--sheen-edge); --ring-peak: var(--sheen-peak);
}
.rooms, .nick, .doc-page { --ring-edge: var(--sheen-edge-l); --ring-peak: var(--sheen-peak-l); }
.room { --ring-edge: var(--sheen-edge); --ring-peak: var(--sheen-peak); }
/* The lead is small text: it takes the palette's stronger pair, or the sheen would barely show. */
.mirror__lead { --ring-edge: var(--sheen-edge-s); --ring-peak: var(--sheen-peak-s); }
.sheen {
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text; background-clip: text;
  background-repeat: no-repeat;
  background-image: radial-gradient(circle at var(--sx, 50%) var(--sy, 200%),
    var(--final) 0 calc(var(--sweep) - 16vmax),
    var(--ring-edge) calc(var(--sweep) - 11vmax),
    var(--ring-peak) calc(var(--sweep) - 7vmax),
    var(--ring-edge) calc(var(--sweep) - 3vmax),
    var(--final) var(--sweep));
}
/* With --sweep at 0 the whole text is --final; the sheen is the ring growing out to --sweep-max. */
/* In a button the label is a flex item with line-height 1, so its painted area would stop at the
   baseline box and cut the descenders (the g's in "Logg inn"). Give it room below. */
.btn > .sheen-part { padding-block: .1em .25em; margin-block: -.1em -.25em; }
/* The buttons themselves catch the light too: a layer over the whole button, painted with the
   same ring (in the palette's colours, made translucent so the button's own colour shows through). */
.btn { position: relative; isolation: isolate; overflow: hidden; }
.btn > .sheen-part { position: relative; z-index: 1; }
.btn::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 200%),
    transparent 0 calc(var(--sweep) - 16vmax),
    color-mix(in srgb, var(--sheen-edge) 18%, transparent) calc(var(--sweep) - 11vmax),
    color-mix(in srgb, var(--sheen-peak) 38%, transparent) calc(var(--sweep) - 7vmax),
    color-mix(in srgb, var(--sheen-edge) 18%, transparent) calc(var(--sweep) - 3vmax),
    transparent var(--sweep));
}
.btn.sweep-btn::after { opacity: 1; animation: sweep 3.2s cubic-bezier(.4, 0, .6, 1); }
.sheen.sweep-text { animation: sweep 3.2s cubic-bezier(.4, 0, .6, 1); }
@keyframes sweep { from { --sweep: var(--sweep-min, 0px); } to { --sweep: var(--sweep-max, 200vmax); } }
.mirror__nowrap { white-space: nowrap; }

.mirror__lead { max-width: 520px; font-size: clamp(17px, 1.1vw + 10px, 20px); color: rgba(255, 246, 252, .9); }
.mirror__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.mirror__hint {
  position: absolute; right: 22%; top: 74%;
  display: inline-flex; align-items: center; gap: 12px;
  font: 700 13px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(42, 11, 70, .7);
  pointer-events: none; transition: opacity .8s;
}
.mirror.is-wiped .mirror__hint { opacity: 0; }
.mirror__finger { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(42, 11, 70, .55); position: relative; animation: finger 2.2s var(--ease) infinite; }
.mirror__finger::after { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: rgba(42, 11, 70, .55); }
@keyframes finger { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-26px, 8px); } }

/* ---------- Whispers ---------- */
.whisper {
  position: relative; overflow: hidden;
  padding: clamp(80px, 12vw, 160px) var(--gutter);
  background:
    radial-gradient(ellipse 60% 70% at 15% 50%, rgba(255, 63, 158, .28), transparent 65%),
    radial-gradient(ellipse 50% 60% at 90% 30%, rgba(123, 47, 224, .5), transparent 65%),
    var(--natt);
  color: var(--sno); text-align: center;
}
.whisper__stage { max-width: 1100px; margin: 0 auto; min-height: 2.6em; font-size: clamp(30px, 4.6vw, 68px); }
.whisper__nick { display: inline-flex; align-items: center; gap: 10px; font: 700 15px/1 var(--sans); color: var(--lilla); margin-bottom: 26px; }
.whisper__who { color: var(--fersken); }
.whisper__dot { width: 8px; height: 8px; border-radius: 50%; background: #39E6A8; box-shadow: 0 0 10px #39E6A8; animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.whisper__line { font: italic 500 1em/1.12 var(--serif); letter-spacing: -.015em; min-height: 2.3em; text-wrap: balance; }
.whisper__caret { display: inline-block; width: .06em; height: .9em; margin-left: .05em; vertical-align: -.08em; background: var(--rosa); animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.whisper__line.is-sent .whisper__text { animation: sent .9s var(--ease) forwards; }
@keyframes sent { to { opacity: 0; transform: translateY(-30px); filter: blur(6px); } }
.whisper__text { display: inline; }
.whisper__sub { margin-top: 28px; font-size: 15px; color: rgba(255, 246, 252, .6); }

/* ---------- Rooms: frosted glass that clears ---------- */
.rooms { background: var(--dis); color: var(--ink); padding: clamp(80px, 10vw, 140px) 0; }
.rooms__head { max-width: 680px; margin: 0 auto 56px; padding: 0 var(--gutter); text-align: center; }
.rooms__head p:last-child { margin-top: 18px; color: var(--ink-soft); }
.rooms__list {
  list-style: none; margin: 0 auto; padding: 0 var(--gutter);
  max-width: calc(var(--page) + 2 * var(--gutter));
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px);
}
.room {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4.6; border-radius: 22px; cursor: pointer;
  box-shadow: 0 30px 60px -30px rgba(42, 11, 70, .6);
  transition: transform .6s var(--ease);
}
.room:nth-child(even) { margin-top: 48px; }
.room img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); filter: blur(14px) saturate(1.3); transition: filter 1s var(--ease), transform 1.4s var(--ease); }
.room__glass {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .35) 0 1.5px, transparent 2px) 0 0/22px 26px,
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .28) 0 1px, transparent 1.5px) 0 0/17px 19px,
    linear-gradient(180deg, rgba(240, 220, 255, .5), rgba(255, 200, 230, .35));
  transition: opacity 1s var(--ease);
}
.room__text {
  position: absolute; inset: auto 0 0 0; padding: 22px 20px;
  color: var(--sno);
  background: linear-gradient(0deg, rgba(42, 11, 70, .85), transparent);
}
.room h3 { font-size: clamp(26px, 2.4vw, 38px); font-style: italic; }
.room p { margin-top: 8px; font-size: 14px; line-height: 1.45; color: rgba(255, 246, 252, .85); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease), opacity .6s; }
.room:hover img, .room.is-clear img { filter: none; transform: scale(1.02); }
.room:hover .room__glass, .room.is-clear .room__glass { opacity: 0; }
.room:hover p, .room.is-clear p { max-height: 6em; opacity: 1; }
.room:hover { transform: translateY(-6px); }

/* ---------- Live video ---------- */
.live {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(32px, 6vw, 100px);
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  background: radial-gradient(ellipse 60% 70% at 80% 50%, rgba(255, 63, 158, .25), transparent 65%), linear-gradient(160deg, var(--fiol), var(--natt));
  color: var(--sno);
}
.live > * { max-width: 620px; }
.live__text { justify-self: end; }
.live__text > p:not(.kicker) { margin-top: 20px; color: rgba(255, 246, 252, .85); }
.live__points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; font-weight: 600; }
.live__points li { display: flex; gap: 12px; align-items: center; }
.live__points li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--rosa); box-shadow: 0 0 12px var(--rosa); flex: none; }
.cam { position: relative; justify-self: start; width: 100%; }
.cam__screen { position: relative; aspect-ratio: 5 / 4; border-radius: 26px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .15); }
.cam__screen img { width: 100%; height: 100%; object-fit: cover; transition: filter 1.1s var(--ease), transform 1.4s var(--ease); }
.cam:not(.is-on) .cam__screen img { filter: blur(22px) brightness(.7) saturate(1.4); transform: scale(1.15); }
.cam__off {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; text-align: center;
  font-size: 14px; color: rgba(255, 246, 252, .8); transition: opacity .6s;
}
.cam__off b { font: italic 600 clamp(26px, 3vw, 40px)/1 var(--serif); color: var(--sno); }
.cam.is-on .cam__off { opacity: 0; }
.cam__rec { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font: 800 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; background: rgba(42, 11, 70, .55); opacity: .4; transition: opacity .4s, background .4s; }
.cam__rec i { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.cam.is-on .cam__rec { opacity: 1; background: var(--rosa); }
.cam.is-on .cam__rec i { animation: blink 1.2s infinite; }
.cam__nick { position: absolute; left: 16px; bottom: 16px; padding: 7px 12px; border-radius: 999px; font: 700 13px/1 var(--sans); background: rgba(42, 11, 70, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cam__pip { position: absolute; right: -18px; bottom: -28px; width: 30%; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .6), 0 0 0 3px var(--natt); }
.cam__pip img { width: 100%; height: 100%; object-fit: cover; }
.cam__pip .cam__nick { left: 8px; bottom: 8px; font-size: 11px; padding: 5px 8px; }
.cam__switch {
  position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 12px; padding: 8px 20px 8px 8px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 15px/1 var(--sans); color: var(--ink); background: var(--sno); box-shadow: 0 16px 34px -10px rgba(0, 0, 0, .55);
}
.cam__knob { width: 52px; height: 30px; border-radius: 999px; background: #D9CBEA; position: relative; transition: background .3s; }
.cam__knob::after { content: ''; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .4s var(--pop); }
.cam.is-on .cam__knob { background: var(--rosa); }
.cam.is-on .cam__knob::after { transform: translateX(22px); }

/* ---------- Nick ---------- */
.nick {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 100px);
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  background: var(--dis); color: var(--ink);
}
.nick > * { max-width: 580px; }
.nick__text { justify-self: end; }
.nick__text > p:not(.kicker) { margin-top: 20px; color: var(--ink-soft); }
.nick__try { justify-self: start; width: 100%; padding: 34px; border-radius: 28px; background: #fff; box-shadow: 0 30px 70px -30px rgba(75, 22, 128, .45); }
.nick__label { display: block; font: 700 14px/1 var(--sans); color: var(--ink-soft); margin-bottom: 12px; }
.nick__field { display: flex; align-items: center; gap: 4px; padding: 0 20px; border-radius: 16px; background: var(--dis); box-shadow: inset 0 0 0 1.5px rgba(123, 47, 224, .2); }
.nick__field:focus-within { box-shadow: inset 0 0 0 2px var(--rosa); }
.nick__field span { font: 800 26px/1 var(--sans); color: var(--rosa); }
.nick__field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 16px 4px; font: italic 600 28px/1 var(--serif); color: var(--ink); }
.nick__reply { margin-top: 20px; display: inline-block; padding: 14px 18px; border-radius: 20px 20px 20px 6px; background: linear-gradient(120deg, #FF5FAE, var(--rosa)); color: #fff; font-weight: 600; box-shadow: 0 14px 30px -12px rgba(255, 63, 158, .8); transform-origin: 0 100%; }
.nick__reply.is-new { animation: reply-in .5s var(--pop); }
@keyframes reply-in { from { opacity: 0; transform: scale(.7) translateY(10px); } }
.nick__reply-who { display: block; font: 800 12px/1 var(--sans); opacity: .85; margin-bottom: 6px; }

/* ---------- Trust ---------- */
.trust { padding: clamp(70px, 9vw, 120px) var(--gutter); background: var(--natt); color: var(--sno); }
.trust h2 { max-width: var(--page); margin: 0 auto 44px; }
.trust__list { list-style: none; margin: 0 auto; padding: 0; max-width: var(--page); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgba(255, 246, 252, .14); border-radius: 22px; overflow: hidden; }
.trust__list li { padding: 28px 26px; background: var(--natt); color: rgba(255, 246, 252, .75); font-size: 15px; line-height: 1.5; }
.trust__list strong { display: block; font: italic 600 24px/1.1 var(--serif); color: var(--sno); margin-bottom: 10px; }

/* ---------- Footer ---------- */
.footer { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--natt), #3A0F5E); color: var(--sno); }
.footer__cta { position: relative; max-width: var(--page); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 80px); padding: clamp(60px, 9vw, 120px) var(--gutter); }
.footer__lips { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 300px 300px 28px 28px; box-shadow: 0 40px 90px -30px rgba(255, 63, 158, .5); }
.footer__words p { margin: 20px 0 30px; color: rgba(255, 246, 252, .85); }
.footer__bar { max-width: var(--page); margin: 0 auto; padding: 28px var(--gutter) 40px; border-top: 1px solid rgba(255, 246, 252, .14); display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; }
.footer__bar .brand__logo { height: 64px; }
.footer__nav { display: flex; gap: 22px; font-weight: 700; }
.footer__nav a { text-decoration: none; }
.footer__nav a:hover { color: var(--rosa); }
.footer__legal { justify-self: end; text-align: right; font-size: 14px; color: var(--lilla); }
.footer__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; margin-bottom: 6px; }
.footer__links a, .link-button { color: rgba(255, 246, 252, .85); text-decoration: none; font: inherit; }
.footer__links a:hover, .link-button:hover { color: #fff; text-decoration: underline; }
.link-button { background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- Reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
.rooms__list [data-reveal]:nth-child(2) { transition-delay: .08s; } .rooms__list [data-reveal]:nth-child(3) { transition-delay: .16s; }
.rooms__list [data-reveal]:nth-child(4) { transition-delay: .24s; } .rooms__list [data-reveal]:nth-child(5) { transition-delay: .32s; }

/* ---------- Sign-up / sign-in modal ---------- */
.auth-modal { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; background: transparent; overflow-y: auto; }
.auth-modal:not([open]) { display: none; }
.auth-modal::backdrop { background: radial-gradient(ellipse at 50% 40%, rgba(123, 47, 224, .55), rgba(28, 6, 48, .88)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.auth-modal[open], .auth-modal[open]::backdrop { animation: fade .3s ease-out; }
.auth-modal[open] .auth-modal__panel { animation: rise .45s var(--pop); }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(20px) scale(.96); } }
html:has(.auth-modal[open]), html:has(.notice-modal[open]) { overflow: hidden; }
.auth-modal__panel { position: relative; width: min(440px, 100%); min-height: 200px; }
.auth-modal iframe { position: relative; z-index: 1; display: block; width: 100%; height: 600px; border: 0; border-radius: 16px; background: transparent; color-scheme: normal; transition: opacity .2s; box-shadow: 0 40px 100px -30px rgba(255, 63, 158, .55); }
.auth-modal.is-loading iframe { opacity: 0; }
/* Each popup card sits in a frame that carries a lipstick kiss on its top left corner (where Nettsnakk has its mascot) and, for the
   scrolling cards, the close button (so neither is cut off where the card scrolls). */
.modal-frame { position: relative; width: min(var(--frame), 100%); }
.modal-frame > div { width: 100%; }
.auth-modal { --frame: 440px; } .notice-modal { --frame: 420px; } .contact-modal { --frame: 600px; } .doc-modal { --frame: 720px; }
.modal-kiss { position: absolute; z-index: 4; left: -22px; top: -22px; width: 74px; height: 50px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 50'%3E%3Cg fill='%23FF3F9E'%3E%3Cpath d='M4 22c8-14 22-18 33-10 11-8 25-4 33 10-9 2-20 1-33-2-13 3-24 4-33 2z' opacity='.92'/%3E%3Cpath d='M5 25c9 1 20 2 32-1 12 3 23 2 32 1-8 14-20 21-32 21S13 39 5 25z' opacity='.85'/%3E%3C/g%3E%3Cg stroke='%23C21E8A' stroke-width='1' opacity='.4' fill='none'%3E%3Cpath d='M20 16l2 6M28 13l1 7M46 13l-1 7M54 16l-2 6M22 30l2 8M32 31l1 9M42 31l-1 9M52 30l-2 8'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; transform: rotate(-14deg); }
dialog[open] .modal-kiss { animation: kiss .6s var(--pop) .25s backwards; }
@keyframes kiss { from { opacity: 0; transform: rotate(-14deg) scale(1.8); } }
.auth-modal__spinner { position: absolute; left: 50%; top: 90px; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; border: 3px solid rgba(255, 246, 252, .25); border-top-color: var(--rosa); animation: spin .8s linear infinite; opacity: 0; pointer-events: none; transition: opacity .2s; }
.auth-modal.is-loading .auth-modal__spinner { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
.auth-modal__close { position: absolute; z-index: 3; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 0; cursor: pointer; color: var(--natt); background: var(--sno); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transition: transform .2s var(--pop); }
.auth-modal__close:hover { transform: rotate(90deg) scale(1.06); }
@media (max-width: 520px) {
  .auth-modal { padding: 60px 10px 16px; place-items: start center; }
  .auth-modal__close { top: -48px; right: 0; }
  .modal-kiss { left: -6px; top: -26px; }
}

/* ---------- Signed-out notice ---------- */
.notice-modal { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0; display: grid; place-items: center; background: transparent; }
.notice-modal:not([open]) { display: none; }
.notice-modal::backdrop { background: rgba(28, 6, 48, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.notice-modal__panel { position: relative; width: min(420px, 100%); padding: 34px 26px 26px; border-radius: 26px; background: var(--sno); color: var(--ink); text-align: center; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); }
.notice-modal[open] .notice-modal__panel { animation: rise .45s var(--pop); }
.notice-modal h2 { font-size: clamp(30px, 6vw, 40px); margin-bottom: 10px; }
.notice-modal p { color: var(--ink-soft); margin-bottom: 24px; }
.notice-modal__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.notice-modal__actions .btn { flex: 1 1 150px; }

/* ---------- Cookie notice ---------- */
.cookie-notice { position: fixed; z-index: 50; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin: 0 auto; display: grid; gap: 12px; padding: 18px 20px; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: 0 18px 50px rgba(28, 6, 48, .45); animation: rise .45s var(--pop); }
.cookie-notice p { font-size: 15px; line-height: 1.5; }
.cookie-notice a { color: var(--rosa-dyp); }
.cookie-notice__actions { display: flex; justify-content: flex-end; }
.cookie-notice__ok { padding: 9px 22px; border: 0; border-radius: 999px; cursor: pointer; font: 700 14px/1 var(--sans); background: var(--natt); color: var(--sno); }
.cookie-notice__ok:hover { background: var(--rosa-dyp); }

/* ---------- Text pages (regler/, personvern/, kontakt/) ---------- */
.doc-page { background: var(--dis); }
.nav--solid { position: sticky; top: 0; background: var(--natt); }
.doc { max-width: 760px; margin: 0 auto; padding: 48px var(--gutter) 80px; }
.doc h1 { font-size: clamp(44px, 7vw, 76px); margin-bottom: 20px; }
.doc h2 { font-size: clamp(24px, 3vw, 32px); margin: 40px 0 12px; }
.doc p, .doc li { font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.doc p + p { margin-top: 12px; }
.doc ul { padding-left: 1.2em; display: grid; gap: 6px; margin: 10px 0; }
.doc a { color: var(--rosa-dyp); }
.doc strong { color: var(--ink); }
.doc code { font-size: .9em; background: rgba(75, 22, 128, .07); padding: 1px 5px; border-radius: 5px; }
.doc__lead { font-size: 19px; }
.doc__rules { counter-reset: rule; list-style: none; padding: 0 !important; margin: 28px 0; display: grid; gap: 12px; }
.doc__rules li { counter-increment: rule; position: relative; padding: 16px 18px 16px 62px; background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px rgba(75, 22, 128, .08); }
.doc__rules li::before { content: counter(rule); position: absolute; left: 16px; top: 14px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px; background: var(--rosa); color: #fff; }
.doc__closing { margin-top: 28px; font-size: 20px; }
.doc__inline-button { color: var(--rosa-dyp); text-decoration: underline; }
.doc-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 28px var(--gutter) 40px; background: var(--natt); color: var(--sno); font-size: 14px; }
.doc-footer nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.doc-footer a { color: rgba(255, 246, 252, .85); text-decoration: none; }
.doc-footer a:hover { color: #fff; text-decoration: underline; }
.doc-footer a[aria-current="page"] { color: #fff; font-weight: 700; }

/* ---------- Contact form ---------- */
.contact { display: grid; gap: 18px; margin-top: 28px; }
.contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact__field { display: grid; gap: 6px; font-weight: 700; font-size: 15px; color: var(--ink); }
.contact__field input, .contact__field textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid rgba(123, 47, 224, .25); font: 500 16px/1.4 var(--sans); color: var(--ink); background: #fff; }
.contact__field textarea { resize: vertical; min-height: 150px; }
.contact__field input:focus, .contact__field textarea:focus { outline: none; border-color: var(--rosa); box-shadow: 0 0 0 3px rgba(255, 63, 158, .2); }
.contact__topics { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.contact__topics legend { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.contact__topics label { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; cursor: pointer; background: #fff; box-shadow: 0 0 0 1.5px rgba(75, 22, 128, .14); font-size: 15px; }
.contact__topics label:has(input:checked) { box-shadow: 0 0 0 2px var(--rosa); background: #FFEAF4; }
.contact__topics input { accent-color: var(--rosa); }
.contact__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact__status { min-height: 1.4em; font-size: 15px; color: var(--ink-soft); }
.contact__status.is-error { color: #C2304A; }
.contact__send { justify-self: start; padding: 13px 30px; border: 0; border-radius: 999px; cursor: pointer; font: 700 16px/1 var(--sans); background: var(--rosa); color: #fff; }
.contact__send:hover { background: var(--rosa-dyp); }
.contact__send:disabled { opacity: .6; cursor: default; }
.contact__note { font-size: 14px !important; }
.contact__done { margin-top: 28px; padding: 24px; border-radius: 18px; background: #fff; }
.contact__done h2 { margin-top: 0; }
.contact[hidden], .contact__done[hidden] { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .rooms__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .room:nth-child(even) { margin-top: 0; }
  .room:nth-child(n+4) { display: none; }
  .trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .live, .nick, .footer__cta { grid-template-columns: minmax(0, 1fr); }
  .live__text, .nick__text, .cam, .nick__try { justify-self: stretch; max-width: none; }
  .cam { margin-bottom: 30px; }
  .footer__lips { max-width: 360px; margin: 0 auto; }
  .footer__bar { grid-template-columns: 1fr; }
  .footer__legal, .footer__links { justify-self: start; text-align: left; justify-content: flex-start; }
  .mirror__hint { top: 110px; transform: none; color: rgba(255, 246, 252, .9); }
  .mirror__finger { border-color: rgba(255, 246, 252, .8); }
  .mirror__finger::after { background: rgba(255, 246, 252, .8); }
}
@media (max-width: 640px) {
  .nav { padding: 14px 16px; }
  .nav__join { display: none; }
  .brand__logo { height: 56px; }
  .mirror { min-height: 100svh; }
  .mirror__photo { object-position: 50% 40%; }
  /* Phones: a stronger shade from below for the text across the full width. The dimmed left edge
     stays as on larger screens, or the left side would light up suddenly at this width. */
  .mirror__shade { background: radial-gradient(ellipse 360px 230px at 0 0, rgba(42, 11, 70, .55), transparent 72%), linear-gradient(90deg, rgba(42, 11, 70, .78) 0%, rgba(42, 11, 70, .45) 34%, transparent 62%), linear-gradient(0deg, rgba(42, 11, 70, .9) 0%, rgba(42, 11, 70, .55) 45%, transparent 70%), linear-gradient(180deg, rgba(42, 11, 70, .5), transparent 22%); }
  .mirror__actions .btn { flex: 1 1 100%; }
  .rooms__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: none; }
  .rooms__list::-webkit-scrollbar { display: none; }
  .room, .room:nth-child(n+4) { display: block; flex: 0 0 72%; scroll-snap-align: center; }
  .trust__list { grid-template-columns: minmax(0, 1fr); }
  .contact__row { grid-template-columns: 1fr; }
  .cam__pip { right: -6px; width: 34%; }
  .nick__try { padding: 24px; }
}
@media (hover: none) { .room { cursor: default; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* Caprasimo has one weight and no italic: emphasis is pink, not slanted. */
h1, h2 { letter-spacing: 0; }
h1 em, h2 em { font-style: normal; letter-spacing: 0; }

/* ---------- One screen (front page only) ----------
   The mirror is the whole page: no scrolling, the small print sits along the bottom edge,
   and on short screens the copy tightens so everything still fits. */
.one-screen, .one-screen body { height: 100%; overflow: hidden; }
html:has(body.one-screen) { height: 100%; overflow: hidden; }
.one-screen .mirror { height: 100svh; min-height: 0; padding-bottom: calc(clamp(36px, 6vh, 80px) + 46px); }
.legal {
  position: fixed; z-index: 15; inset: auto 0 0 0;
  display: flex; align-items: center; justify-content: space-between; gap: 6px 24px; flex-wrap: wrap;
  padding: 12px var(--gutter) max(12px, env(safe-area-inset-bottom));
  font-size: 13px; color: rgba(255, 246, 252, .72);
  background: linear-gradient(0deg, rgba(42, 11, 70, .7), transparent);
}
.legal__links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.legal__links a, .legal .link-button { color: rgba(255, 246, 252, .88); text-decoration: none; font: inherit; }
.legal__links a:hover, .legal .link-button:hover { color: #fff; text-decoration: underline; }
@media (max-height: 760px) {
  .one-screen .mirror__title { font-size: calc(clamp(44px, 6.5vh + 2.5vw, 100px) * var(--title-scale)); margin-bottom: 14px; }
  .one-screen .mirror__lead { font-size: 16px; }
  .one-screen .mirror__actions { margin-top: 20px; }
  .one-screen .mirror { padding-top: 100px; }
}
@media (max-height: 640px) { .one-screen .mirror__lead { display: none; } }
@media (max-width: 640px) {
  .legal { justify-content: center; text-align: center; font-size: 12px; padding-top: 10px; }
  .legal__links { justify-content: center; gap: 2px 14px; }
  .legal small { width: 100%; }
}

/* ---------- Contact popup (front page) ----------
   The same form as /kontakt, in a card over the dimmed mirror. Scrolls inside the card on short screens. */
html:has(.contact-modal[open]), html:has(.doc-modal[open]) { overflow: hidden; }
.contact-modal, .doc-modal { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0; display: grid; place-items: center; background: transparent; }
.contact-modal:not([open]), .doc-modal:not([open]) { display: none; }
.contact-modal::backdrop, .doc-modal::backdrop { background: radial-gradient(ellipse at 50% 40%, rgba(123, 47, 224, .55), rgba(28, 6, 48, .88)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.contact-modal[open], .contact-modal[open]::backdrop, .doc-modal[open], .doc-modal[open]::backdrop { animation: fade .3s ease-out; }
.contact-modal__panel { position: relative; width: min(600px, 100%); max-height: calc(100svh - 64px); overflow: auto; padding: 34px 30px 26px; border-radius: 26px; background: var(--sno); color: var(--ink); box-shadow: 0 40px 100px -30px rgba(255, 63, 158, .55); overscroll-behavior: contain; }
.contact-modal[open] .contact-modal__panel, .doc-modal[open] .doc-modal__panel { animation: rise .45s var(--pop); }
.contact-modal h2 { font-size: clamp(28px, 5vw, 38px); margin: 0 0 8px; }
.contact-modal__lead { color: var(--ink-soft); font-size: 16px; }
.contact-modal .contact { margin-top: 18px; gap: 14px; }
.contact-modal .contact__field textarea { min-height: 110px; }
.contact-modal .contact__note { color: var(--ink-soft); margin: 0; }
.contact-modal .contact__note a { color: var(--rosa-dyp); }
.contact-modal .contact__done { margin-top: 18px; padding: 0; background: none; }
.contact-modal .contact__done p { color: var(--ink-soft); margin-bottom: 20px; }
/* Regler and Personvern in the popup: the page text, a little smaller. */
.doc-modal__panel { width: min(720px, 100%); }
.doc-modal .doc { max-width: none; margin: 0; padding: 0; }
.doc-modal .doc h1 { font-size: clamp(32px, 5vw, 46px); margin: 0 0 12px; }
.doc-modal .doc h2 { font-size: clamp(21px, 3vw, 26px); margin: 30px 0 10px; }
.doc-modal .doc p, .doc-modal .doc li { font-size: 16px; }
.doc-modal .doc__lead { font-size: 17px; }
.doc-modal .doc__rules { margin: 20px 0; gap: 10px; }
.doc-modal .doc__rules li { background: rgba(255, 255, 255, .7); }
.contact-modal__close { position: absolute; z-index: 5; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 0; cursor: pointer; color: var(--natt); background: var(--sno); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transition: transform .2s var(--pop); }
.contact-modal__close:hover { transform: rotate(90deg) scale(1.06); }
@media (max-width: 520px) {
  .contact-modal, .doc-modal { padding: 34px 10px 10px; }
  .contact-modal__panel { padding: 28px 18px 20px; max-height: calc(100svh - 44px); }
  .contact-modal__close { right: -4px; }
  .contact-modal .contact__row { grid-template-columns: 1fr; }
}

.one-screen .nav .brand { cursor: pointer; }
.brand__mark { position: relative; display: block; }

/* ---------- The 3D logo (logo3d.js) ----------
   A canvas a little larger than the logo, so the sway and the shadow have room; the flat logo
   keeps its place underneath. A tap: one big kiss lands with a smack, then the logo spins. */
.brand__3d { position: absolute; pointer-events: none; max-width: none; }   /* larger than its box on purpose */
.big-kiss { position: absolute; z-index: 2; left: 52%; top: 50%; width: 70px; aspect-ratio: 74 / 50; pointer-events: none; background: center/contain no-repeat; filter: drop-shadow(0 3px 8px rgba(42, 11, 70, .5)); transform: translate(-50%, -50%) rotate(-12deg); animation: big-smack 1.1s cubic-bezier(.3, 0, .2, 1) forwards; }
/* Glinting stars when it is happy (after the spin), like stars in a photo of a galaxy: a tiny
   white-hot core, a faint halo and four thin light spikes. They twinkle, they do not spin. */
.sparkle { position: absolute; z-index: 2; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none; opacity: 0; transform: scale(0);
  background:
    radial-gradient(circle, #fff 0 1.1px, rgba(255, 255, 255, .7) 1.8px, rgba(255, 228, 244, .22) 3.6px, transparent 7px),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .8) 50%, transparent) center / 100% 1px no-repeat,
    linear-gradient(0deg, transparent, rgba(255, 255, 255, .8) 50%, transparent) center / 1px 100% no-repeat;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, .55));
  animation: twinkle .95s cubic-bezier(.3, 0, .3, 1) forwards; }
@keyframes twinkle {
  0% { opacity: 0; transform: scale(.2); }
  30% { opacity: 1; transform: scale(var(--s)); }
  55% { opacity: .55; transform: scale(calc(var(--s) * .8)); }
  70% { opacity: 1; transform: scale(var(--s)); }
  100% { opacity: 0; transform: scale(calc(var(--s) * .3)); }
}
@keyframes big-smack {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(2.6); }
  16% { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(.94); }
  24% { transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
  45% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(1.2); }
}