/* ==========================================================================
   Natrag u školu landing — "Vrijeme je za školu"

   Pozicije su mjerene template-matchingom na izvorni PSD (2000 š, landing
   1600 centriran). Svaka sekcija je full-bleed pozadina fiksne visine
   (native px × --k); overlayi (sat, bubbles, uređaj, naziv) su apsolutno
   pozicionirani od CENTRA sekcije pa pri sužavanju prozora pozadina i
   overlayi ostaju zalijepljeni, a bočni rubovi scene se simetrično režu
   (overflow hidden). --k pada po breakpointima (media-query.css); ispod
   768px se prelazi na mobile pozadine i vw pozicioniranje.
   ========================================================================== */

/* smooth scroll za anchor/programatske skokove (samo na stranicama koje
   učitavaju ovaj css); poštuje reduced-motion */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.bts {
	--k: 1;
	max-width: 1600px;
	margin: 0 auto;
	overflow: hidden;
	background: #fff;
}

.bts-slide {
	position: relative;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: calc(1600px * var(--k)) auto;
}

.bts-slide--1 { height: calc(825px * var(--k)); background-image: url("/custom/back-to-school/assets/images/slide-1-bg-desktop.jpg"); background-color: #0d4a44; }
.bts-slide--2 { height: calc(698px * var(--k)); background-image: url("/custom/back-to-school/assets/images/slide-2-bg-desktop.jpg"); background-color: #d9d9d9; }
.bts-slide--3 { height: calc(826px * var(--k)); background-image: url("/custom/back-to-school/assets/images/slide-3-bg-desktop.jpg"); background-color: #d9d9d9; }
.bts-slide--4 { height: calc(820px * var(--k)); background-image: url("/custom/back-to-school/assets/images/slide-4-bg-desktop.jpg"); background-color: #d9d9d9; }
.bts-slide--5 { height: calc(826px * var(--k)); background-image: url("/custom/back-to-school/assets/images/slide-5-bg-desktop.jpg"); background-color: #d9d9d9; }
.bts-slide--6 { height: calc(823px * var(--k)); background-image: url("/custom/back-to-school/assets/images/slide-6-bg-desktop.jpg"); background-color: #d9d9d9; }
.bts-slide--7 { height: calc(951px * var(--k)); background-image: url("/custom/back-to-school/assets/images/slide-7-bg-desktop.jpg"); background-color: #d9d9d9; }

/* Overlayi: left je pomak lijevog ruba od centra (x − 800 iz PSD strippa).
   max-width: none — guard da globalna site pravila za img ne stežu širine */
.bts-el {
	position: absolute;
	display: block;
	height: auto;
	max-width: none;
}

.bts-bubble img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- 1. Hero ------------------------------------------------------------ */
.bts-hero-clock    { left: calc(50% + 174px * var(--k)); top: calc(159px * var(--k)); width: calc(195px * var(--k)); }
.bts-hero-text--1  { left: calc(50% - 332px * var(--k)); top: calc(293px * var(--k)); width: calc(470px * var(--k)); }
.bts-hero-text--2  { left: calc(50% - 332px * var(--k)); top: calc(355px * var(--k)); width: calc(677px * var(--k)); }
.bts-hero-text--3  { left: calc(50% +  82px * var(--k)); top: calc(449px * var(--k)); width: calc(236px * var(--k)); }

/* --- 2. MacBook (overlayi desno) ---------------------------------------- */
.bts-slide--2 .bts-device { left: calc(50% - 489px * var(--k)); top: calc(191px * var(--k)); width: calc(777px * var(--k)); }
.bts-slide--2 .bts-clock  { left: calc(50% +  29px * var(--k)); top: calc( 76px * var(--k)); width: calc(394px * var(--k)); }
.bts-slide--2 .bts-bubble--1 { left: calc(50% +  85px * var(--k)); top: calc(258px * var(--k)); width: calc(202px * var(--k)); }
.bts-slide--2 .bts-bubble--2 { left: calc(50% + 304px * var(--k)); top: calc(222px * var(--k)); width: calc(202px * var(--k)); }
.bts-slide--2 .bts-name   { left: calc(50% + 123px * var(--k)); top: calc(464px * var(--k)); width: calc(329px * var(--k)); }

/* --- 3. HP Notebook (overlayi lijevo) ------------------------------------ */
.bts-slide--3 .bts-device { left: calc(50% - 118px * var(--k)); top: calc(225px * var(--k)); width: calc(698px * var(--k)); }
.bts-slide--3 .bts-clock  { left: calc(50% - 433px * var(--k)); top: calc(203px * var(--k)); width: calc(393px * var(--k)); }
.bts-slide--3 .bts-bubble--1 { left: calc(50% - 392px * var(--k)); top: calc(381px * var(--k)); width: calc(202px * var(--k)); }
.bts-slide--3 .bts-bubble--2 { left: calc(50% - 173px * var(--k)); top: calc(345px * var(--k)); width: calc(202px * var(--k)); }
.bts-slide--3 .bts-name   { left: calc(50% - 394px * var(--k)); top: calc(591px * var(--k)); width: calc(429px * var(--k)); }

/* --- 4. HP Elitebook (overlayi desno) ------------------------------------ */
.bts-slide--4 .bts-device { left: calc(50% - 508px * var(--k)); top: calc(281px * var(--k)); width: calc(777px * var(--k)); }
.bts-slide--4 .bts-clock  { left: calc(50% +  29px * var(--k)); top: calc(199px * var(--k)); width: calc(394px * var(--k)); }
.bts-slide--4 .bts-bubble--1 { left: calc(50% +  85px * var(--k)); top: calc(384px * var(--k)); width: calc(202px * var(--k)); }
.bts-slide--4 .bts-bubble--2 { left: calc(50% + 304px * var(--k)); top: calc(348px * var(--k)); width: calc(202px * var(--k)); }
.bts-slide--4 .bts-name   { left: calc(50% + 100px * var(--k)); top: calc(587px * var(--k)); width: calc(379px * var(--k)); }

/* --- 5. Xiaomi Redmi Pad (overlayi desno) -------------------------------- */
.bts-slide--5 .bts-device { left: calc(50% - 386px * var(--k)); top: calc(254px * var(--k)); width: calc(414px * var(--k)); }
.bts-slide--5 .bts-clock  { left: calc(50% +  29px * var(--k)); top: calc(202px * var(--k)); width: calc(385px * var(--k)); }
.bts-slide--5 .bts-bubble--1 { left: calc(50% +  85px * var(--k)); top: calc(384px * var(--k)); width: calc(202px * var(--k)); }
.bts-slide--5 .bts-bubble--2 { left: calc(50% + 312px * var(--k)); top: calc(348px * var(--k)); width: calc(202px * var(--k)); }
.bts-slide--5 .bts-name   { left: calc(50% + 123px * var(--k)); top: calc(590px * var(--k)); width: calc(276px * var(--k)); }

/* --- 6. Samsung Galaxy Tab (overlayi lijevo) ------------------------------ */
.bts-slide--6 .bts-device { left: calc(50% -  54px * var(--k)); top: calc(209px * var(--k)); width: calc(687px * var(--k)); }
.bts-slide--6 .bts-clock  { left: calc(50% - 464px * var(--k)); top: calc(201px * var(--k)); width: calc(384px * var(--k)); }
.bts-slide--6 .bts-bubble--1 { left: calc(50% - 433px * var(--k)); top: calc(379px * var(--k)); width: calc(202px * var(--k)); }
.bts-slide--6 .bts-bubble--2 { left: calc(50% - 210px * var(--k)); top: calc(343px * var(--k)); width: calc(202px * var(--k)); }
.bts-slide--6 .bts-name   { left: calc(50% - 426px * var(--k)); top: calc(589px * var(--k)); width: calc(385px * var(--k)); }

/* --- 7. Lenovo Idea Tab (overlayi desno) ---------------------------------- */
.bts-slide--7 .bts-device { left: calc(50% - 581px * var(--k)); top: calc(247px * var(--k)); width: calc(734px * var(--k)); }
.bts-slide--7 .bts-clock  { left: calc(50% +  29px * var(--k)); top: calc(201px * var(--k)); width: calc(385px * var(--k)); }
.bts-slide--7 .bts-bubble--1 { left: calc(50% +  85px * var(--k)); top: calc(383px * var(--k)); width: calc(202px * var(--k)); }
.bts-slide--7 .bts-bubble--2 { left: calc(50% + 303px * var(--k)); top: calc(347px * var(--k)); width: calc(202px * var(--k)); }
.bts-slide--7 .bts-name   { left: calc(50% + 125px * var(--k)); top: calc(589px * var(--k)); width: calc(328px * var(--k)); }

/* --- Scroll-in animacije --------------------------------------------------
   Lifecycle kao na prijašnjim landinzima: jednom pri prvom ulasku u viewport
   (JS dodaje .is-visible na sekciju i radi unobserve, uz rootMargin -100px).
   Skriveno početno stanje je scoped na .anim-ready (dodaje ga JS) pa bez
   JS-a sve ostaje vidljivo. Pozadine se NE animiraju.

   Hero: sat fade-in s ulaskom udesno pa nastavlja "zvoniti" (bounce+shake);
   tekstovi fade-in slijeva nadesno, jedan po jedan. Ostale sekcije: sat i
   naziv se lagano dovezu, uređaj ulazi odozdo uz blagi overshoot (jedan
   "cool" efekt), bubbles ufejdaju prema dolje, sve staggered. --- */

/* sat samo ufejda (bez ulaznog translatea — zvonjava kreće odmah pa bi
   je ulazni transform ionako pregazio) */
.anim-ready .bts-hero-clock {
	opacity: 0;
	transition: opacity .8s ease;
	will-change: opacity, transform;
	transform-origin: 50% 22%;
}
.anim-ready .bts-hero-text {
	opacity: 0;
	transform: translateX(-40px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1);
	will-change: opacity, transform;
}
.anim-ready .bts-slide--1.is-visible .bts-hero-clock { opacity: 1; }
.anim-ready .bts-slide--1.is-visible .bts-hero-text--1 { opacity: 1; transform: none; transition-delay: .2s; }
.anim-ready .bts-slide--1.is-visible .bts-hero-text--2 { opacity: 1; transform: none; transition-delay: .38s; }
.anim-ready .bts-slide--1.is-visible .bts-hero-text--3 { opacity: 1; transform: none; transition-delay: .56s; }

/* hero sat zvoni: zvonjava odmah na početku ciklusa, pauza na kraju;
   delay 1.3s = kreće tek kad svi tekstovi završe s ulaskom (.56s + .7s) */
@keyframes btsRing {
	0%            { transform: translateY(0) rotate(0deg); }
	3%            { transform: translateY(-12px) rotate(-7deg); }
	7%            { transform: translateY(-4px) rotate(6deg); }
	11%           { transform: translateY(-9px) rotate(-5deg); }
	15%           { transform: translateY(-2px) rotate(4deg); }
	19%           { transform: translateY(-5px) rotate(-3deg); }
	23%           { transform: translateY(0) rotate(2deg); }
	27%, 100%     { transform: translateY(0) rotate(0deg); }
}
.anim-ready .bts-slide--1.is-visible .bts-hero-clock {
	animation: btsRing 3.2s ease-in-out 1.3s infinite;
}

/* satovi i nazivi u product sekcijama: samo se lagano dovezu */
.anim-ready .bts-clock,
.anim-ready .bts-name {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .7s ease, transform .7s ease;
	will-change: opacity, transform;
}

/* uređaj: ulazi odozdo uz blagi zoom-settle */
.anim-ready .bts-device {
	opacity: 0;
	transform: translateY(56px) scale(.93);
	transition: opacity .7s ease, transform .85s cubic-bezier(.22, 1.12, .36, 1);
	will-change: opacity, transform;
}

/* bubbles: ufejdaju prema dolje. Reveal ide preko keyframe animacije (ne
   transitiona) da stagger delay ne zarobi hover transition na linku. */
.anim-ready .bts-bubble {
	opacity: 0;
	will-change: opacity, transform;
}

@keyframes btsBubbleDrop {
	from { opacity: 0; transform: translateY(-26px); }
	to   { opacity: 1; transform: none; }
}

.anim-ready .bts-slide.is-visible .bts-clock     { opacity: 1; transform: none; }
.anim-ready .bts-slide.is-visible .bts-device    { opacity: 1; transform: none; transition-delay: .15s; }
.anim-ready .bts-slide.is-visible .bts-bubble--1 { opacity: 1; animation: btsBubbleDrop .6s cubic-bezier(.2, .7, .3, 1) .45s backwards; }
.anim-ready .bts-slide.is-visible .bts-bubble--2 { opacity: 1; animation: btsBubbleDrop .6s cubic-bezier(.2, .7, .3, 1) .6s backwards; }
.anim-ready .bts-slide.is-visible .bts-name      { opacity: 1; transform: none; transition-delay: .78s; }

/* --- Interaktivnost bubblova (linkovi) --- */
.bts .bts-bubble { transition: transform .35s ease; }

@media (hover: hover) {
	.bts .bts-bubble:hover { transform: translateY(-5px) scale(1.04); }
}

.bts-bubble:focus-visible {
	outline: 3px solid #ed1c24;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.anim-ready .bts-hero-clock,
	.anim-ready .bts-hero-text,
	.anim-ready .bts-clock,
	.anim-ready .bts-name,
	.anim-ready .bts-device,
	.anim-ready .bts-bubble {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none;
	}
}