/* Shared portal background and circle palette; one scrollable reading scene. */
body .portal-view.why-do-view {
  position: absolute!important;
  inset: 0!important;
  display: block!important;
  height: 100dvh!important;
  padding: 0!important;
  overflow-x: hidden!important;
  overflow-y: auto!important;
  overscroll-behavior: contain;
  background: var(--portal-background)!important;
  scrollbar-width: thin;
  scrollbar-color: var(--circle-blue) transparent;
}
.why-do-track { position: relative; min-height: 100dvh; }
body .portal-view.why-do-view::after { display: none; }
/* Remove the pale decorative circle inherited from the shared topic layout. */
body .portal-view.why-do-view::before { display: none!important; content: none!important; }
.why-do-stage { position: sticky; top: 0; height: 100dvh; overflow: hidden; }
body .why-do-stage h1 {
  position: absolute; top: 5dvh; left: 5vw; z-index: 2;
  margin: 0; font-family: Modak,Arial,sans-serif!important;
  font-weight: 400!important; color: var(--circle-blue)!important;
  font-size: clamp(48px,6vw,100px); line-height: 1.1;
}
.why-do-circle {
  --diameter: min(70vw,110dvh);
  z-index: 1;
  position: absolute; top: 23dvh; left: calc(4vw - var(--diameter) * .20);
  width: var(--diameter); height: var(--diameter);
  border-radius: 50%; background: var(--circle-orange);
}
.why-do-reading {
  position: absolute; top: 17%; left: 24%; width: 62%;
  height: min(60%,58dvh); overflow: hidden;
  color: var(--brand-white,#fff);
  mask-image: linear-gradient(transparent,#000 5%,#000 94%,transparent);
}
.why-do-text { position: relative; padding: 12px 0 22px; will-change: transform; }
body .why-do-text p {
  margin: 0 0 1.2em; font-size: clamp(16px,1.25vw,22px);
  line-height: 1.55; text-align: left;
}
body[data-view="zasto-optimizam"] .portal-view.why-do-view.is-active .why-do-text p,
body[data-view="zasto-optimizam"] .portal-view.why-do-view.is-active .why-do-text p * {
  color: #fff!important;
}
.why-do-pictures {
  z-index: 0;
  position: absolute; right: 7vw; top: 31dvh;
  width: min(37.2vw,63.6dvh); aspect-ratio: 1;
}
.why-do-picture {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--circle-blue); opacity: 0; isolation: isolate;
  transform: translateX(65vw); will-change: transform,opacity;
}
.why-do-picture::before {
  content: ''; position: absolute; inset: -12%; z-index: -1;
  border-radius: 50%; background: var(--circle-blue); opacity: .28;
  pointer-events: none;
}
.why-do-picture:first-child { opacity: 1; transform: none; }
body .why-do-stage #why-do-title,
body .why-do-stage #why-do-title * {
  font-family: 'Modak',Arial,sans-serif!important;
  font-weight: 400!important;
}
body .why-do-scroll-hint {
  position: absolute; right: 7vw; bottom: 4dvh; margin: 0;
  color: var(--circle-blue); font-size: 15px;
}
.why-do-scroll-hint span { padding-left: 8px; }
.why-do-view.is-active #why-do-title {
  animation: why-do-title-enter 2.8s cubic-bezier(.22,1,.36,1) both;
}
.why-do-view.is-active .why-do-circle {
  animation: why-do-circle-left-enter 3.6s cubic-bezier(.22,1,.36,1) both;
}
.why-do-view.is-active .why-do-pictures {
  animation: why-do-circle-right-enter 3.6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes why-do-title-enter {
  from { translate: -110vw 0; }
  to { translate: 0 0; }
}
@keyframes why-do-circle-left-enter {
  from { translate: -110vw 0; }
  to { translate: 0 0; }
}
@keyframes why-do-circle-right-enter {
  from { translate: 110vw 0; }
  to { translate: 0 0; }
}
@media(max-width:820px) {
  body .portal-view.why-do-view { position: fixed!important; }
  .why-do-stage { position:relative; height:auto; min-height:100dvh; overflow:visible; padding:5dvh 0 100px; }
  body .why-do-stage h1 { position:relative; top:auto; left:auto; margin:0 96px 32px 6vw; font-size:clamp(42px,10vw,68px); }
  .why-do-circle { position:relative; top:auto; left:auto; width:100%; height:auto; min-height:calc(100dvh - 160px); border-radius:0; background:transparent; }
  .why-do-reading { position:relative; top:auto; left:auto; width:auto; height:auto; margin:0; padding:0 7vw 24px; overflow:visible; mask-image:none; }
  .why-do-text { padding:0; will-change:auto; }
  body .why-do-text p { font-size:clamp(17px,4.3vw,20px); line-height:1.65; }
  body[data-view="zasto-optimizam"] .portal-view.why-do-view.is-active .why-do-text p,
  body[data-view="zasto-optimizam"] .portal-view.why-do-view.is-active .why-do-text p * { color:var(--circle-blue)!important; }
  .why-do-pictures { position:relative; right:auto; top:auto; bottom:auto; display:flex; gap:8vw; width:100%; aspect-ratio:auto; box-sizing:border-box; padding:24px 12vw; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; }
  .why-do-pictures .why-do-picture { position:relative; inset:auto; flex:0 0 76vw; width:76vw; aspect-ratio:1; opacity:1; transform:none; overflow:hidden; scroll-snap-align:center; }
  .why-do-picture::before { display:none; }
  .why-do-view.is-active .why-do-circle,
  .why-do-view.is-active .why-do-pictures { animation:none; }
  body .why-do-scroll-hint { position:absolute; left:50%; right:auto; top:calc(100dvh - 80px); bottom:auto; z-index:5; }
  :root body .why-do-view button.why-do-scroll-hint.portal-round-control.portal-scroll-cue[data-reading-end] { display:none!important; }
}
@media(prefers-reduced-motion:reduce) {
  .why-do-view.is-active #why-do-title,
  .why-do-view.is-active .why-do-circle,
  .why-do-view.is-active .why-do-pictures { animation: none; }
  .why-do-picture,.why-do-text { will-change: auto; }
}

/* Photographs share the same circular frame and size. */
.why-do-picture-photo { background:transparent; }
.why-do-pictures .why-do-picture-photo img {
  position:absolute; top:-10%; left:-10%; width:120%; height:120%;
  display:block; max-width:none; max-height:none; border-radius:50%; object-fit:cover;
}

/* The balloon asset is framed around the complete balloon and basket. */
.why-do-pictures .why-do-picture-photo:nth-child(2) img { object-position:50% 50%; }

/* A small disclosure follows the upper edge of each photograph. */
.why-do-ai-caption {
  position: absolute; inset: -17%; width: 134%; height: 134%;
  max-width: none; max-height: none;
  overflow: visible; pointer-events: none; z-index: 1;
}
.why-do-ai-caption text {
  fill: #fff; font-family: Arial, sans-serif; font-size: 5.8px;
  font-weight: 500; letter-spacing: .12px;
  paint-order: stroke; stroke: rgba(0,0,0,.2); stroke-width: .25px;
}
.why-do-ai-caption-en { display: none; }
html[lang="en"] .why-do-ai-caption-hr { display: none; }
html[lang="en"] .why-do-ai-caption-en { display: inline; }