/* Презентация об агентстве You Know Studio. Слайд 960×540 по YKS Design System v2.
 * Правила вёрстки меняются сначала в yks_spec.md, потом здесь. */

@font-face { font-family: 'Inter'; font-weight: 400; src: url('fonts/Inter_18pt-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-weight: 500; src: url('fonts/Inter_18pt-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-weight: 700; src: url('fonts/Inter_18pt-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Sa No Rules'; src: url('fonts/SaNoRules.ttf') format('truetype'); font-display: swap; }

:root {
    --red: #D21749; --blue: #A4CFF8; --blue-deep: #7BADF6; --cream: #EFECE5;
    --white: #FFFFFF; --graphite: #242423; --black: #0C0C0C;
}

html, body { margin: 0; height: 100%; background: var(--black); overflow: hidden; -webkit-text-size-adjust: 100%; }
#deck { position: absolute; left: 50%; top: 50%; width: 960px; height: 540px; transform-origin: center center; }
.frame { position: absolute; left: 0; top: 0; width: 960px; height: 540px; display: none; }
.frame.on { display: block; }
.slide { position: absolute; left: 0; top: 0; width: 960px; height: 540px; overflow: hidden;
    background: var(--cream); color: var(--graphite); font-family: 'Inter', sans-serif; transform-origin: left top; }
.slide.red { background: var(--red); color: var(--cream); }
.slide.blue { background: var(--blue); }
.slide.dark { background: var(--black); color: var(--cream); }
.slide.grid {
    background-image:
        repeating-linear-gradient(0deg, rgba(164,207,248,.4) 0 .5px, transparent .5px 19px),
        repeating-linear-gradient(90deg, rgba(164,207,248,.4) 0 .5px, transparent .5px 19px);
}
.slide * { box-sizing: border-box; }
.slide p { margin: 0; }
.abs { position: absolute; }

/* типографика: брендовые токены, размеры не менять */
.mega { font-size: 93px; font-weight: 700; line-height: .9; letter-spacing: -.03em; margin: 0; }
.hero { font-size: 77px; font-weight: 500; line-height: .87; text-transform: uppercase; letter-spacing: -.02em; margin: 0; white-space: nowrap; }
.h1 { font-size: 53px; font-weight: 700; line-height: .9; text-transform: uppercase; margin: 0; white-space: nowrap; }
.h2 { font-size: 24px; font-weight: 700; line-height: 1.05; text-transform: uppercase; margin: 0; }
.h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.body { font-size: 17px; font-weight: 400; line-height: 1.4; }
.body p + p { margin-top: 12px; }
.small { font-size: 13px; font-weight: 400; line-height: 1.35; }
.hand { font-family: 'Sa No Rules', cursive; font-weight: normal; line-height: 1.05; white-space: nowrap; }
.c-red { color: var(--red); } .c-blue { color: var(--blue); } .c-cream { color: var(--cream); } .c-dark { color: var(--graphite); }

.pageno { position: absolute; right: 30px; top: 22px; font-size: 13px; z-index: 5; }
.footer { position: absolute; left: 26px; top: 508px; font-size: 11px; font-weight: 700; letter-spacing: .01em; z-index: 5; }
.hdr-l { position: absolute; left: 26px; top: 24px; font-size: 11px; font-weight: 700; }
.hdr-r { position: absolute; right: 30px; top: 24px; font-size: 11px; font-weight: 700; text-align: right; text-transform: uppercase; line-height: 1.5; }
.hdr-r img { display: block; width: 64px; margin: 6px 0 0 auto; }

/* марки из ассетов */
.inline-photo { display: inline-block; width: 122px; height: 65px; object-fit: cover; vertical-align: baseline; margin: 0 14px -4px; }
.ovaled { position: relative; display: inline-block; }
.ovaled > img { position: absolute; left: -.3em; top: -.28em; width: calc(100% + .6em); height: calc(100% + .56em); pointer-events: none; transform: rotate(-2deg); }
.mark { position: absolute; pointer-events: none; }
.clip { position: absolute; z-index: 6; pointer-events: none; }
.ph { position: absolute; object-fit: cover; display: block; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.backing { position: absolute; }
.polaroid { position: absolute; background: var(--white); padding: 8px 8px 0; box-shadow: 0 2px 8px rgba(0,0,0,.1); color: var(--graphite); }
.polaroid img { width: 100%; object-fit: cover; display: block; }
.polaroid .cap { height: 40px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.note { position: absolute; background: url('decor/notebook_3_web.png') center / 100% 100% no-repeat;
    filter: drop-shadow(0 10px 22px rgba(0,0,0,.25)); z-index: 4; color: var(--graphite); }
.plaque { position: absolute; padding: 16px 18px 18px; }
.plaque.p-red { background: var(--red); color: var(--cream); }
.plaque.p-dark { background: var(--graphite); color: var(--cream); }
a.lnk { color: inherit; text-decoration: none; padding-bottom: 6px; background: url('marks/underline_thin_cream_wide.svg') left bottom / 100% 8px no-repeat; }

/* видео: нейтральное поле, голубая кнопка, без имитаций соцсетей */
.vid { position: absolute; background: var(--black); cursor: pointer; z-index: 3; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.vid video, .vid img.still, .vid img.pp { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid img.pp { display: none; }
.vid .gi { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none; }
.vid .gi.on { display: block; }
.vid .play { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; pointer-events: none; }
.vid.sm .play { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
.vid .playlabel { position: absolute; right: 10px; bottom: 8px; font-size: 26px; color: var(--blue); transform: rotate(-6deg); pointer-events: none; }
.vid.sm .playlabel { display: none; }
.vid.playing .play, .vid.playing .playlabel, .vid.photo .play, .vid.photo .playlabel { display: none; }
.vid .galcount { position: absolute; left: 10px; top: 8px; font-size: 22px; color: var(--cream); background: var(--graphite); padding: 2px 8px 0; transform: rotate(-4deg); pointer-events: none; }
.vid .gnav { position: absolute; top: 50%; width: 40px; height: 34px; margin-top: -17px; padding: 8px 6px 3px; border: 0; background: var(--graphite); cursor: pointer; z-index: 4; }
.vid .gnav svg { width: 100%; height: 100%; display: block; }
.vid .gnav.prev { left: -14px; transform: rotate(4deg) scaleX(-1); }
.vid .gnav.next { right: -14px; transform: rotate(-4deg); }
.vid .gnav:active { background: var(--red); }

/* ролик на весь слайд: двойной клик или F */
.shade { position: absolute; left: 0; top: 0; width: 960px; height: 540px; background: var(--black); z-index: 40; display: none; }
.slide.theatre .shade { display: block; }
.slide.theatre .vid.big { left: 0 !important; top: 0 !important; width: 960px !important; height: 540px !important; z-index: 50; transform: none !important; box-shadow: none; }
.slide.theatre .vid.big video, .slide.theatre .vid.big img.still { object-fit: contain; }
.slide.theatre .vid.big .gnav.prev { left: 20px; }
.slide.theatre .vid.big .gnav.next { right: 20px; }
.slide.theatre .note { filter: none; z-index: 60; }

/* навигация по деке */
#nav { position: fixed; right: 16px; bottom: 12px; display: flex; align-items: center; gap: 10px; z-index: 100;
    font: 700 12px 'Inter', sans-serif; color: rgba(239,236,229,.7); user-select: none; }
#nav button { width: 38px; height: 32px; border: 0; padding: 8px 6px 3px; background: var(--graphite); cursor: pointer; }
#nav .pdf { font: 12px 'Inter', sans-serif; color: rgba(239,236,229,.7); text-decoration: none; border-bottom: 1px solid var(--red); padding-bottom: 2px; margin-right: 8px; }
#nav .pdf:hover { color: #EFECE5; }
#nav button svg { width: 100%; height: 100%; display: block; }
#nav button.prev { transform: scaleX(-1); }
#nav button:active { background: var(--red); }
#hint { position: fixed; left: 16px; bottom: 14px; font: 12px 'Inter', sans-serif; color: rgba(239,236,229,.45); animation: hint 9s forwards; z-index: 100; }
@keyframes hint { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }

/* телефон в вертикали: слайды лентой сверху вниз */
body.feed { overflow: auto; height: auto; }
body.feed #deck { position: static; width: auto; height: auto; transform: none !important; }
body.feed .frame { position: relative; display: block; width: 100%; overflow: hidden; margin-bottom: 6px; }
body.feed #nav, body.feed #hint { display: none; }

@media print {
    html, body { overflow: visible; height: auto; background: none; }
    #deck { position: static; transform: none !important; width: 960px; height: auto; }
    .frame { display: block !important; position: relative; height: 540px !important; page-break-after: always; break-after: page; }
    .slide { transform: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .vid video { display: none; }
    .vid img.pp { display: block; }
    .vid .gnav, .vid .galcount, #nav, #hint, .shade { display: none !important; }
    @page { size: 960px 540px; margin: 0; }
}