/* Base styles, layout switch and interactive states. Element styles are in css/page.css. */
@font-face{font-family:"TT Commons Pro";src:url("../fonts/TTCommonsPro-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"TT Commons Pro";src:url("../fonts/TTCommonsPro-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"TT Commons Pro";src:url("../fonts/TTCommonsPro-DemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"TT Commons Pro";src:url("../fonts/TTCommonsPro-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
:root{color-scheme:light only;background:#F7F5F8;--m-zoom:1;--d-w:320px;--d-h:368px;--d-r:64px;--d-box:412px}
html,body{margin:0;padding:0;background:#F7F5F8;min-height:100%;overflow-x:clip;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
/* :where() keeps these at zero specificity so element classes in page.css always win */
:where(a){color:#2C2C2C;text-decoration:none}
:where(a:hover){color:#7874FF}
*{box-sizing:border-box}
@keyframes popMoreBob{0%,100%{transform:translateY(-1px)}50%{transform:translateY(3px)}}
@keyframes logoMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Two layouts: mobile (<1024px, fixed 320px design scaled with zoom) and desktop.
   html.is-desk is set by the inline script in <head> and by js/main.js on resize. */
html.is-desk .m-only,html:not(.is-desk) .d-only{display:none!important}

/* Images that fill their box (former <image-slot>) */
.slot{display:block;width:100%;height:100%;object-fit:cover}

/* Case popups: hidden until opened; content is not rendered (and its lazy images not loaded) before the first open */
[data-popup]{opacity:0;pointer-events:none}
[data-popup].open{opacity:1;pointer-events:auto}
[data-popup]:not(.seen)>*{display:none}
[data-card]{transform:translateY(40px) scale(.97)}
[data-popup].open [data-card]{transform:none}

/* ----- Elements built by js/main.js (desktop variants scoped with .d-layout) ----- */
/* Hero card deck */
.hero-card{position:absolute;left:0;top:18px;width:183px;height:210px;transform-origin:50% 100%}
.d-layout .hero-card{top:28px;width:var(--d-w);height:var(--d-h)}
.hero-layer{position:absolute;inset:0;border-radius:42px;overflow:hidden;transition:transform .42s cubic-bezier(.3,.7,.2,1),box-shadow .42s}
.d-layout .hero-layer{border-radius:var(--d-r)}
.tone-0{background:#D9D9D9}.tone-1{background:#CECECE}.tone-2{background:#C4C4C4}.tone-3{background:#BABABA}
.hero-cover{position:absolute;inset:0;pointer-events:none;transition:opacity .35s}
/* Ruler under the deck; colours of .tag come from SLIDES in js/data.js */
.hero-tick{position:absolute;left:50%;top:50%;background:#2C2C2C;border-radius:1px}
.hero-pill{position:absolute;left:50%;top:0}
.tag{display:inline-flex;align-items:center;gap:3.19px;height:24px;padding:0 6px;border-radius:10px;font-size:11px;font-weight:600;line-height:.88;letter-spacing:-0.03em;white-space:nowrap}
.tag-icon{width:10px;height:10px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.d-layout .tag{gap:6px;height:36px;padding:0 14px;border-radius:14px;font-size:15px}
.d-layout .tag-icon{width:14px;height:14px}
/* Avatar rows ("Мене обирають") */
.person{width:41px;height:41px;border-radius:50%;overflow:hidden;background:#E9E7EA;flex-shrink:0;cursor:pointer;transition:transform .25s}
.person:hover{transform:scale(1.08)}
.d-layout .person{width:88px;height:88px}
.d-layout .person:hover{transform:scale(1.07)}
.person-img{width:100%;height:100%;background:center/cover no-repeat}
/* Scroll-driven word reveal */
.rv-word{display:inline-block;will-change:transform,color;color:rgb(206,206,206)}

/* Hover states */
.hv1:hover{background:#000;color:#fff;transform:translateY(-1px)}
.hv2:hover{background:#7874FF;color:#fff}
.hv3:hover{background:#2C2C2C}
.hv4:hover{background:#000;color:#fff}
.hv5:hover{background:#EBEBEB;color:#000}
.hv6:hover{background:#fff}
.hv7:hover{background:#000;color:#fff;transform:translateY(-2px)}
.hv8:hover{transform:translateY(-4px);box-shadow:0 24px 48px -28px rgba(44,44,44,.25)}
.hv9:hover{transform:translateY(-4px)}
.hv10:hover{transform:translateY(-4px);background:#2C2C2C}
.hv11:hover{background:#EBEBEB;color:#000;transform:translateY(-2px)}
.hv12:hover{background:#2C2C2C;transform:translateY(-4px)}
.hv13:hover{background:#000}
.hv14:hover{background:#DCDCDC}
.hv15:hover{background:#DCDCDC;transform:rotate(90deg)}