/* ---------- Fonter ---------- */
@font-face { font-family: "Unity Text"; src: url("assets/fonts/tccc-unitytext-regular.ttf") format("truetype"); font-weight: 400; font-display: block; }
@font-face { font-family: "Unity Text"; src: url("assets/fonts/tccc-unitytext-medium.ttf") format("truetype"); font-weight: 500; font-display: block; }
@font-face { font-family: "Unity Text"; src: url("assets/fonts/tccc-unitytext-bold.ttf") format("truetype"); font-weight: 700; font-display: block; }

/* ---------- Telefonramme (dark mode) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #e6e6e9; overflow: hidden; -webkit-tap-highlight-color: transparent; }
button { font: inherit; border: 0; padding: 0; background: none; cursor: pointer; color: inherit; }
.stage-wrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
.phone { position: relative; flex: none; display: flex; flex-direction: column; width: 390px; background: #000; overflow: hidden; transform: scale(var(--scale, 1)); transform-origin: center center; }
.stage { position: relative; flex: none; width: 390px; height: 650px; overflow: hidden; overflow: clip; background: #121214; }
.statusbar { height: 54px; flex: none; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 28px 10px 44px; background: #000; font: 600 16px/1 -apple-system, system-ui, sans-serif; color: #fff; fill: #fff; }
.statusbar .icons { display: flex; gap: 6px; align-items: center; }
.browserbar { height: 140px; flex: none; position: relative; padding: 10px 16px 0; background: #1c1c1e; border-top: 1px solid #2c2c2e; font-family: -apple-system, system-ui, sans-serif; }
.urlbar { height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; background: #2c2c2e; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.4); font-size: 15px; color: #fff; }
.urlbar svg { opacity: .55; fill: #fff; }
.toolbar { display: flex; justify-content: space-between; padding: 16px 12px 0; }
.toolbar svg { width: 24px; height: 24px; fill: none; stroke: #0a84ff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.toolbar svg.dim { stroke: #545458; }
.home-indicator { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; border-radius: 3px; background: #fff; transform: translateX(-50%); }
@media (min-width: 501px) { .phone { border-radius: 52px; box-shadow: 0 0 0 11px #1b1b1d, 0 0 0 13px #3a3a3d, 0 30px 80px rgba(0,0,0,.35); } }
@media (max-width: 500px) { body { background: #121214; } .statusbar, .browserbar { display: none; } }

/* Nøytral avisbakgrunn – mørk variant */
.site { position: absolute; inset: 0; background: #121214; }
.site-header { height: 18px; border-bottom: 1px solid #2c2c2e; margin-bottom: 16px; }
.site-hero { height: 240px; background: #2c2c2e; border-radius: 4px; }
.site-article { padding: 22px 22px 6px; }
.bar.headline { height: 18px; width: 92%; background: #3a3a3c; margin-bottom: 9px; border-radius: 3px; }
.bar.headline.short { width: 62%; margin-bottom: 16px; }
.line { height: 10px; background: #262628; margin-bottom: 9px; border-radius: 3px; }
.w75 { width: 75%; } .w90 { width: 90%; }
.site-section { padding: 18px 22px 0; }
.site-block { height: 102px; background: #2c2c2e; margin-bottom: 15px; border-radius: 4px; }
.replay { display: none; position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); padding: 12px 20px; border-radius: 999px; background: #f2f2f7; color: #000; font-size: 14px; font-family: -apple-system, system-ui, sans-serif; }
.stage.ad-removed .replay { display: block; }
.stage.ad-removed .ad { display: none; }
.ad { position: absolute; inset: 0; pointer-events: none; z-index: 10; font-family: "Unity Text", Arial, sans-serif; }

/* ---------- Lukket tilstand (boble) ---------- */
.bubble { position: absolute; inset: 0; opacity: 0; transition: opacity .8s; }
.bubble.visible { opacity: 1; }
.ad.is-open .bubble { visibility: hidden; }

.expandable-icon {
  position: absolute; left: 200px; top: 473px; width: 215px; height: 215px;
  background: url("assets/img/avatar-bottle.png") center / contain no-repeat;
  pointer-events: auto;
  animation: shake 6s ease-in-out infinite;
}
@keyframes shake {
  0%, 70% { transform: rotate(0deg); transform-origin: 50% 50%; }
  10% { transform: rotate(6deg); }
  20%, 40%, 60% { transform: rotate(-8deg); }
  30%, 50% { transform: rotate(8deg); }
}

/* Tagline: tidligere tekst-som-bilde, nå HTML med crossfade */
.tagline { position: absolute; left: 245px; top: 623px; width: 135px; height: 27px; pointer-events: none; }
.tagline-art { position: absolute; left: -55px; top: -50px; width: 150px; height: 60px; isolation: isolate; }
.tl {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  isolation: isolate;
  font-weight: 700; font-size: 12.6px; line-height: 17.95px; color: #fff; letter-spacing: 0;
  mix-blend-mode: plus-lighter;
  animation: 4s ease-in-out infinite;
}
.tl br { display: none; }
.tl span { position: relative; display: block; height: 17.95px; padding: 0; text-align: center; background: #000; white-space: nowrap; }
/* Boksbredder målt fra Cavai-taglinebildene (1221 px → 150 px) */
.tl span:nth-of-type(1) { width: 141.9px; }
.tl span:nth-of-type(3) { width: 85.2px; }
.tl-a span:nth-of-type(2) { width: 128.4px; }
.tl-b span:nth-of-type(2) { width: 98.6px; }
.tl-c span:nth-of-type(2) { width: 102.9px; }
.tl span::before { content: ""; position: absolute; inset: -4px; background: #fff; z-index: -1; }
.tl-a { animation-name: tlA; }
.tl-b { animation-name: tlB; }
.tl-c { animation-name: tlC; }
@keyframes tlA { 0%, 100% { opacity: 1; } 33% { opacity: 0; } 66% { opacity: 0; } }
@keyframes tlB { 0%, 100% { opacity: 0; } 33% { opacity: 1; } 66% { opacity: 0; } }
@keyframes tlC { 0%, 100% { opacity: 0; } 33% { opacity: 0; } 66% { opacity: 1; } }

.ad-label {
  position: absolute; right: 25px; top: 525.5px; height: 19.5px; padding: 0 8px;
  display: flex; align-items: center; justify-content: center;
  background: #F9FBFC; color: #808080; outline: .8px solid #808080; border-radius: 5px;
  font-weight: 400; font-size: 12px; line-height: 1;
}
.remove-button {
  position: absolute; left: 345px; top: 491px; width: 20px; height: 20px; border-radius: 50%;
  background: #F8FBFC; outline: .8px solid #808080; box-shadow: rgba(110,111,113,.2) 3px -4px 12px;
  pointer-events: auto;
}
.remove-button i, .close-button i {
  position: absolute; top: 50%; left: 50%; width: 60%; height: 2px; background: #808080;
  transform: translate(-50%, -50%) rotate(45deg);
}
.remove-button i + i, .close-button i + i { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---------- Åpen tilstand ---------- */
.expanded {
  position: absolute; inset: 0; overflow: hidden; overflow: clip;
  background: #F40000;
  clip-path: inset(100% 0 0 0); visibility: hidden;
  transition: clip-path .3s, visibility 0s .3s;
}
.ad.is-open .expanded { clip-path: inset(0); visibility: visible; pointer-events: auto; transition: clip-path .3s, visibility 0s; }

.close-button { position: absolute; left: 10px; top: 3px; width: 34px; height: 34px; z-index: 18; }

.g1 {
  position: absolute; left: 175.5px; top: 97.5px; width: 351px; height: 585px; z-index: 7;
  background: url("assets/img/hand-bottle.png") 100% 100% / contain no-repeat;
  opacity: 0; pointer-events: none;
}
.g2 {
  position: absolute; left: -19.5px; top: 247px; width: 242px; height: 403px; z-index: 8;
  background: url("assets/img/hand-lanyard.png") 0% 100% / contain no-repeat;
  transform: rotate(40deg);
  opacity: 0; pointer-events: none;
}
.g3 {
  position: absolute; left: 253.5px; top: 432.2px; width: 117px; height: 195px; z-index: 17;
  background: url("assets/img/logo-coca-cola-white.png") 100% 100% / contain no-repeat;
  pointer-events: none;
}

.t1, .t2 { position: absolute; left: 0; right: 0; display: flex; justify-content: center; color: #fff; font-weight: 500; white-space: nowrap; line-height: 1; }
.t1 { top: 65px; font-size: 44px; z-index: 12; }
.t2 { top: 104px; font-size: 25.6px; z-index: 11; }
.t3, .t4, .t5 {
  position: absolute; left: 35.1px; height: 25px; line-height: 25px;
  background: #000; color: #fff; font-weight: 400; font-size: 17.6px; white-space: pre;
  opacity: 0;
}
.t3 { top: 156px; z-index: 13; }
.t4 { top: 175.5px; z-index: 14; }
.t5 { top: 195px; z-index: 15; }

.b1 {
  position: absolute; left: 39px; top: 591.5px; width: 156px; height: 39px; z-index: 16;
  display: flex; align-items: center; justify-content: center;
  background: #000; color: #fff; border: 2px solid #fff; border-radius: 9999px;
  font-weight: 700; font-size: 12.8px; text-decoration: none;
}

/* Kort (kopiert fra Cavai-blokken «cardContainer») */
.h2 { position: absolute; left: 29.3px; top: 240.5px; width: 331.5px; height: 331.6px; z-index: 10; overflow: visible; }
.cardContainer {
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  display: grid;
  width: 100%;
  height: 100%;
  grid-row-gap: 15px;
  grid-column-gap: 15px;
}
.cardWrapper {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  overflow: visible;
  container-type: size;
  perspective: 1000px;
  transform-style: preserve-3d;
  cursor: pointer;
}
.cardWrapper::before, .cardWrapper::after {
  width: 100%;
  height: 100%;
  content: "";
  display: block;
  position: absolute;
  transition: all 750ms ease-in-out;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  box-shadow: 2px 2px 2px rgb(0,0,0,0.3);
}
@container (min-width: 1px) {
  .cardWrapper::before, .cardWrapper::after { width: 100cqw; height: 100cqw; }
}
.cardWrapper::before { opacity: 0; }
.cardWrapper::after { opacity: 0.5; backface-visibility: hidden; background-color: #B21F24; }
.flippedCard::before { animation: flipCardBack 1s ease-in-out forwards; opacity: 1; }
.flippedCard::after { animation: flipCard 1s ease-in-out forwards; }
@keyframes flipCard {
  0% { transform: rotateZ(0deg) rotateY(0deg) scale(1); }
  55% { transform: rotateZ(5deg) rotateY(90deg) scale(1.05); }
  90% { transform: rotateZ(-5deg) rotateY(195deg) scale(1); }
  100% { transform: rotateZ(0deg) rotateY(180deg) scale(1); }
}
@keyframes flipCardBack {
  0% { transform: rotateZ(0deg) rotateY(0deg) scaleX(-1); }
  55% { transform: rotateZ(5deg) rotateY(90deg) scaleX(-1.05); }
  90% { transform: rotateZ(-5deg) rotateY(195deg) scaleX(-1); }
  100% { transform: rotateZ(0deg) rotateY(180deg) scaleX(-1); }
}
#card1::before { background-image: url("assets/img/card-1-euro2024.png"); }
#card2::before { background-image: url("assets/img/card-2-findings.png"); }
#card3::before { background-image: url("assets/img/card-3-paris2024.png"); }
#card4::before { background-image: url("assets/img/card-4-tomorrowland.png"); }

/* ---------- Tidslinje ved åpning (Cavai: CSS → 200 ms → CSS → 500 ms → CSS) ---------- */
.play-hands .g1 { animation: flyUpfromRight 1s ease forwards, floatUpDown 2s ease 1.2s infinite; }
.play-hands .g2 { animation: flyUpfromLeft 1s ease forwards, floatUpDown2 2.1s ease 1.4s infinite; }
@keyframes flyUpfromRight {
  0% { transform: translateY(69%) translateX(53%); opacity: 1; }
  50% { transform: translateY(69%) translateX(53%); opacity: 1; }
  100% { transform: translateX(0%); opacity: 1; }
}
@keyframes floatUpDown {
  0%, 100% { transform: translateY(0%); }
  50% { transform: translateY(-1%); }
}
@keyframes flyUpfromLeft {
  0% { transform: translateY(90%) translateX(-65%) rotate(40deg); opacity: 1; }
  50% { transform: translateY(90%) translateX(-65%) rotate(40deg); opacity: 1; }
  100% { transform: translateX(0%) rotate(40deg); opacity: 1; }
}
@keyframes floatUpDown2 {
  0%, 100% { transform: translateY(0%) rotate(40deg); }
  50% { transform: translateY(-1%) rotate(40deg); }
}

.play-steps .t3 { animation: flyInRight 1.2s ease forwards; }
.play-steps .t4 { animation: flyInRight 1.2s ease 0.3s forwards; }
.play-steps .t5 { animation: flyInRight 1.2s ease 0.7s forwards; }
@keyframes flyInRight {
  0% { transform: translateX(-120%); opacity: 1; }
  50% { transform: translateX(-120%); opacity: 1; }
  100% { transform: translateX(0%); opacity: 1; }
}

/* ---------- Innebygd i porteføljen (index.html?embed) ----------
   Gjennomsiktig bakgrunn og alltid telefonramme, også når vinduet er smalt */
body.embed { background: transparent; }
body.embed .statusbar { display: flex; }
body.embed .browserbar { display: block; }
body.embed .phone { border-radius: 52px; box-shadow: 0 0 0 11px #1b1b1d, 0 0 0 13px #3a3a3d; }

/* Porteføljen på mobil: adresselinjen er fjernet, verktøylinjen ligger øverst i en lavere bunnlinje */
body.no-url .urlbar { display: none; }
body.no-url .browserbar { height: 86px; padding-top: 14px; }
body.no-url .toolbar { padding-top: 0; }