/* Emma Talačová — portfolio v3 (směr: Binjan reference)
   Krém + tyrkys + korál + žlutá. Vanilla, bez buildu. */

:root {
  --bg: #fdf4ec;
  --card: #fffdf9;
  --ink: #351226;
  --muted: #6e4a60;
  --line: #f3ddd3;

  --pink: #f0197f;
  --pink-deep: #b8125f;
  --coral: #ff5f45;
  --orange: #fb8a1e;

  /* jemné podklady sekcí */
  --tint-rose: #ffd9cc;
  --tint-apricot: #ffe1a8;
  --tint-blush: #ffcede;

  --ff-display: "Fraunces", Georgia, "Times New Roman", serif;
  --ff-body: "Manrope", system-ui, -apple-system, sans-serif;

  --wrap: 1140px;
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--ff-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 30, "WONK" 0;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: var(--pink-deep); }

img { max-width: 100%; height: auto; display: block; }

/* ---------- layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.prose { max-width: 60ch; }

section { padding-block: clamp(3.5rem, 9vw, 6.5rem); position: relative; }

.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- skip link ---------- */

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--pink-deep); color: #fff;
  padding: .75rem 1.25rem; z-index: 100; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ---------- header: jen jméno a jazyk v rozích, žádné menu ---------- */

.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem clamp(1.25rem, 4vw, 2.5rem);
}
/* stejný hlas jako velké jméno v hero: Manrope 800, verzálky */
.brand {
  font-family: var(--ff-body); font-weight: 800; font-size: .9375rem;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: .55rem;
}
.brand::before {
  content: ""; width: 11px; height: 11px; border-radius: 50%;
  background: var(--coral); flex: none;
  transition: transform .3s var(--ease);
}
.brand:hover::before { transform: scale(1.35); }

.lang {
  display: flex; align-items: center; gap: .1rem;
  font-size: .8125rem; font-weight: 800; letter-spacing: .04em;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 999px;
  padding: .2rem .3rem;
}
.lang a { color: var(--muted); text-decoration: none; padding: .3rem .6rem; border-radius: 999px; }
.lang [aria-current="true"] { color: var(--card); background: var(--ink); }
.lang .sep { display: none; }

/* ---------- plovoucí CTA (FAB) ---------- */

.fab {
  position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 40;
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--coral); color: var(--ink);
  text-decoration: none; font-weight: 800; font-size: 1rem;
  padding: .95rem 1.6rem; border-radius: 999px;
  box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--coral) 85%, black);
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.fab::before { content: "✉"; font-size: 1.1em; }
.fab:hover, .fab:focus-visible { transform: translateY(-3px) rotate(-2deg); }
.fab.is-hidden { opacity: 0; pointer-events: none; transform: translateY(12px); }

:where(a, button):focus-visible {
  outline: 3px solid var(--pink-deep); outline-offset: 3px; border-radius: 4px;
}

/* ---------- floating shapes ---------- */

.blob {
  position: absolute; border-radius: 50%; z-index: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .js .blob { animation: float 9s ease-in-out infinite; }
  .js .blob:nth-of-type(2) { animation-duration: 12s; animation-delay: -4s; }
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-16px) rotate(5deg); }
}

/* ---------- hero (reference: text | cutout na tahu štětce | výrok) ---------- */

/* Madison layout: obří kurzíva za hlavou, cutout uprostřed na teplé záři,
   velké jméno přes spodek fotky, role vpravo dole. */
.hero { padding: clamp(4.5rem, 9vw, 6rem) 0 0; overflow: visible; }

.hero-stage { position: relative; }

.hero-decor {
  position: absolute; top: clamp(.5rem, 3vw, 2.5rem); left: 0; right: 0;
  display: flex; justify-content: space-between;
  padding-inline: var(--gut);
  font-family: var(--ff-display); font-style: italic; font-weight: 600;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: clamp(3.25rem, 8.5vw, 6.5rem);
  line-height: 1; color: var(--ink);
  z-index: 0; pointer-events: none;
}

.hero-glow {
  position: absolute; z-index: 0; left: 50%; bottom: -14%;
  transform: translateX(-50%);
  width: min(780px, 92vw); aspect-ratio: 1.15;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--pink) 62%, transparent) 0%,
    color-mix(in srgb, var(--coral) 45%, transparent) 45%,
    color-mix(in srgb, var(--orange) 30%, transparent) 68%,
    transparent 82%);
  filter: blur(6px);
  pointer-events: none;
}

.hero-photo {
  position: relative; z-index: 1;
  display: block; margin-inline: auto;
  width: clamp(300px, 37vw, 460px);
  margin-top: clamp(2.25rem, 6vw, 4.5rem);
  /* rozpustit rovné hrany PNG do pozadí: boky i spodek měkce vyfádované */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to bottom, #000 82%, transparent 99%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to bottom, #000 82%, transparent 99%);
  mask-composite: intersect;
}

.hero-mail {
  position: absolute; z-index: 2; left: var(--gut); top: 47%;
  color: var(--coral); font-weight: 800; font-size: 1rem;
  text-decoration: none; border-bottom: 2px solid var(--coral);
  padding-bottom: 2px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.hero-mail:hover, .hero-mail:focus-visible { color: var(--pink-deep); border-color: var(--pink-deep); }

/* pruh štítků pod celou hero kompozicí */
.hero-tags {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem;
  list-style: none; margin: 0;
  padding: 1.5rem var(--gut) .5rem;
}
.hero-tags li {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: .32rem .8rem;
  font-size: .8125rem; font-weight: 700;
  box-shadow: 0 8px 20px -14px rgba(53, 18, 38, .4);
}
.hero-tags li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--pink);
}
.hero-tags li:nth-child(2)::before { background: var(--orange); }
.hero-tags li:nth-child(3)::before { background: var(--coral); }

.hero-spec {
  position: absolute; z-index: 2; right: var(--gut); top: 45%;
  width: 22ch; font-size: .9375rem; line-height: 1.55;
  color: var(--ink); font-weight: 500;
}

.hero-name {
  position: absolute; z-index: 2; left: var(--gut);
  bottom: clamp(.75rem, 3.5vw, 2.25rem);
  font-family: var(--ff-body); font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.02em;
  font-size: clamp(2.5rem, 6.3vw, 4.75rem);
  line-height: .95;
}

.hero-role {
  position: absolute; z-index: 2; right: var(--gut);
  bottom: clamp(1rem, 3.75vw, 2.5rem);
  text-align: right;
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(.9375rem, 1.9vw, 1.4375rem);
  line-height: 1.2; letter-spacing: .01em;
}

.mark {
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--orange) 85%, transparent) 62%);
  padding: 0 .08em;
}

@media (max-width: 760px) {
  .hero { padding-bottom: 5rem; }  /* ať mail nekončí pod plovoucím tlačítkem */
  .hero-stage { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .hero-decor {
    position: static; order: 1; justify-content: center; gap: .35em;
    padding: 0; font-size: clamp(2.75rem, 13vw, 3.5rem);
  }
  .hero-photo { order: 2; width: min(320px, 82vw); margin-top: -1.1em; }
  .hero-glow { bottom: auto; top: 12%; width: min(420px, 105vw); }
  .hero-name { position: static; order: 3; margin-top: 1.5rem; }
  .hero-role { position: static; order: 4; text-align: center; margin-top: .9rem; }
  .hero-spec { position: static; order: 5; width: auto; max-width: 32ch; margin-top: 1.75rem; line-height: 1.7; }
  .hero-mail { position: static; order: 6; margin-top: 1.5rem; }
}

/* ---------- vlnové předěly a podklady sekcí ---------- */

.wave {
  display: block; height: clamp(36px, 6vw, 60px);
  overflow: hidden; margin-bottom: -1px;
}
.wave svg { display: block; width: 200%; height: 100%; }
.wave path { fill: currentColor; }
.wave.flip { transform: scaleY(-1); margin-bottom: 0; margin-top: -1px; }
@media (prefers-reduced-motion: no-preference) {
  .js .wave svg { animation: wave-drift 10s linear infinite; }
  .js .wave.flip svg { animation-duration: 13s; }
}
@keyframes wave-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.tint-rose { background: var(--tint-rose); }
.tint-apricot { background: var(--tint-apricot); }
.tint-blush { background: var(--tint-blush); }

/* ---------- section heads ---------- */

/* centrované nadpisy sekcí ve stejném hlase jako jméno v hero */
.sec-head {
  text-align: center;
  margin-bottom: clamp(2rem, 4.5vw, 3.25rem);
  position: relative; z-index: 2;
}
.sec-num {
  display: block; margin-bottom: .5rem;
  font-family: var(--ff-body); font-size: .8125rem; font-weight: 800;
  letter-spacing: .18em; color: var(--coral); font-variant-numeric: tabular-nums;
}
.sec-head h2 {
  font-family: var(--ff-body); font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.01em;
  font-size: clamp(1.625rem, 3.6vw, 2.5rem);
  position: relative; display: inline-block;
}
.sec-head h2::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -.45em; height: 8px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="8" viewBox="0 0 40 8"><path d="M0 4 Q5 0 10 4 T20 4 T30 4 T40 4" fill="none" stroke="%23f0197f" stroke-width="2.5" stroke-linecap="round"/></svg>') repeat-x;
  background-size: 40px 8px;
}

/* ---------- s čím ti pomůžu (reference: karty vlevo, text vpravo) ---------- */

.help-grid {
  display: grid; grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}

.help-cards { display: grid; gap: 1rem; }
.help-card {
  display: flex; align-items: flex-start; gap: 1.1rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 1.35rem 1.5rem;
  box-shadow: 0 18px 40px -30px rgba(53, 18, 38, .35);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.help-card:hover { transform: translateY(-3px); box-shadow: 0 26px 48px -30px rgba(53, 18, 38, .45); }
.help-icon {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
}
.help-icon svg { width: 24px; height: 24px; }
.help-card:nth-child(1) .help-icon { background: var(--pink); }
.help-card:nth-child(2) .help-icon { background: var(--orange); color: var(--ink); }
.help-card:nth-child(3) .help-icon { background: var(--coral); }
.help-card h3 { font-size: 1.1875rem; margin-bottom: .2rem; }
.help-card p { color: var(--muted); font-size: .9375rem; }

.help-text .prose { font-size: 1.125rem; }
.help-text p + p { margin-top: 1.25rem; }

@media (max-width: 860px) {
  .help-grid { grid-template-columns: 1fr; }
  .help-text { order: -1; }
}

/* ---------- galerie ---------- */

/* nekonečný automaticky posouvající se pás fotek — vidět všechny bez scrollu.
   Fotky jsou v HTML 2× za sebou, animace posune o polovinu a smyčka navazuje. */
.gallery { padding-block: clamp(3rem, 7vw, 5rem); overflow: hidden; }
.gallery .wrap { max-width: none; padding: 0; }
.gallery-marquee {
  display: flex; width: max-content;
  gap: clamp(.6rem, 1.2vw, 1rem);
  list-style: none; margin: 0; padding: 0;
}
.gallery-marquee li {
  flex: 0 0 auto;
  height: clamp(260px, 34vw, 420px);
  border-radius: 22px; overflow: hidden;
}
.gallery-marquee img { height: 100%; width: auto; display: block; }

@media (prefers-reduced-motion: no-preference) {
  .js .gallery-marquee { animation: gallery-slide 42s linear infinite; }
  .gallery:hover .gallery-marquee { animation-play-state: paused; }
}
@keyframes gallery-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - clamp(.3rem, .6vw, .5rem))); }
}

/* bez JS / reduced-motion: prostý vodorovný scroll, ať jsou fotky dostupné */
@media (prefers-reduced-motion: reduce) {
  .gallery { overflow-x: auto; }
}

/* ---------- showcase: kde mou práci uvidíš ---------- */

.show-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 3vw, 2rem); }
.show-card {
  display: flex; flex-direction: column; align-items: flex-start;
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: clamp(1.75rem, 3vw, 2.5rem);
  text-decoration: none; color: var(--ink);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.show-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: var(--pink);
}
.show-card.ig::before {
  background: linear-gradient(90deg, var(--orange), var(--pink));
}
.show-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(53, 18, 38, .4); }
.show-tag {
  display: inline-block; font-size: .75rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--pink-deep); margin-bottom: .8rem;
}
.show-card.ig .show-tag { color: var(--coral); }
.show-card h3 { font-size: 1.625rem; margin-bottom: .6rem; }
.show-card p { color: var(--muted); margin-bottom: 1.4rem; }
/* odkaz vždy přisedlý ke dnu karty, ať má text 2 nebo 3 řádky */
.show-link {
  margin-top: auto;
  font-weight: 800; font-size: .9375rem; color: var(--ink);
  border-bottom: 2px solid var(--line);
  transition: border-color .2s var(--ease);
}
.show-link::after { content: " \2197"; }
.show-card:hover .show-link { border-color: var(--pink); }
.show-card.ig:hover .show-link { border-color: var(--coral); }
@media (max-width: 760px) { .show-grid { grid-template-columns: 1fr; } }

/* ---------- ukázka tvorby: reel karty + dialog s přehrávačem ---------- */

.reel-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  list-style: none; margin: 0; padding: 0;
  max-width: 880px; margin-inline: auto;
}
.reel {
  position: relative; display: block; width: 100%;
  aspect-ratio: 9 / 16; border: 0; padding: 0; cursor: pointer;
  border-radius: 20px; overflow: hidden;
  background: linear-gradient(165deg, var(--orange), var(--coral) 45%, var(--pink));
  box-shadow: 0 22px 44px -28px rgba(53, 18, 38, .5);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.reel:hover, .reel:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 30px 54px -28px rgba(53, 18, 38, .6);
}
.reel img, .reel video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.reel video { opacity: 0; transition: opacity .3s var(--ease); }
.reel.is-playing video { opacity: 1; }
.reel.is-playing .reel-play { opacity: 0; }
.reel-play {
  position: absolute; inset: 0; margin: auto;
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(4px);
  color: var(--ink);
  box-shadow: 0 10px 26px -12px rgba(53, 18, 38, .6);
  transition: transform .3s var(--ease);
  pointer-events: none;
}
.reel-play svg { width: 22px; height: 22px; margin-left: 3px; }
.reel:hover .reel-play { transform: scale(1.12); }

.reel-dialog {
  border: 0; padding: 0; background: transparent;
  max-width: min(92vw, 420px); width: 100%;
}
.reel-dialog::backdrop {
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  backdrop-filter: blur(6px);
}
.reel-dialog video {
  display: block; width: 100%; max-height: 82vh;
  border-radius: 18px; background: #000;
}
.reel-close {
  position: absolute; top: -14px; right: -14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: var(--card); color: var(--ink);
  font-size: 1.1rem; font-weight: 800; cursor: pointer;
  box-shadow: 0 8px 22px -10px rgba(53, 18, 38, .7);
}
@media (max-width: 640px) {
  .reel-grid { grid-template-columns: 1fr; max-width: 300px; }
  .reel-close { top: 6px; right: 6px; }
}

/* ---------- zkušenosti (reference: timeline s barevnými tečkami) ---------- */

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid; grid-template-columns: 15rem 1fr;
  gap: .5rem 3rem; padding-block: 1.4rem;
}
.job-head h3 { font-size: 1.25rem; margin-bottom: .25rem; }
.job-meta { color: var(--muted); font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.job-body { color: var(--muted); max-width: 56ch; position: relative; padding-left: 2.4rem; }

.timeline li .job-body::before {
  content: ""; position: absolute; left: 0; top: .4em;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--dot, var(--pink));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--dot, var(--pink)) 18%, transparent);
}
.timeline li .job-body::after {
  content: ""; position: absolute; left: 5px; top: 1.6em; bottom: -1.8em;
  border-left: 2px dashed var(--line);
}
.timeline li:last-child .job-body::after { display: none; }
.timeline li:nth-child(2) { --dot: var(--coral); }
.timeline li:nth-child(3) { --dot: var(--orange); }
.timeline li:nth-child(4) { --dot: var(--pink-deep); }
.timeline li:nth-child(5) { --dot: var(--ink); }

@media (max-width: 760px) {
  .timeline li { grid-template-columns: 1fr; gap: .5rem; }
  .job-body { padding-left: 2.4rem; }
  .job-head { padding-left: 2.4rem; }
}

/* ---------- vzdělání ---------- */

.edu { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
.edu-block { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem 1.5rem; }
.edu-block + .edu-block { margin-top: 1.25rem; }
.edu-block h3 { font-size: 1.125rem; margin-bottom: .25rem; }
.edu-block .job-meta { margin-bottom: .5rem; }
.edu-block p { color: var(--muted); font-size: .9375rem; }
.edu-block ul { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: .9375rem; }
.edu-block li + li { margin-top: .375rem; }
@media (max-width: 760px) { .edu { grid-template-columns: 1fr; gap: 1.25rem; } }

/* ---------- kontakt (reference: světlý, velký nadpis, podtržený mail) ---------- */

.contact .wrap {
  display: grid; grid-template-columns: 1.2fr .8fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.contact h2 {
  font-family: var(--ff-body); font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.01em;
  font-size: clamp(1.875rem, 4.2vw, 3rem);
  margin-bottom: 1.25rem;
}
.contact .lead { color: var(--muted); font-size: 1.1875rem; max-width: 40ch; }
.contact-links { display: grid; gap: 1.1rem; justify-items: start; }
.contact-mail {
  font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  color: var(--coral); text-decoration: none;
  border-bottom: 3px solid var(--coral); padding-bottom: 2px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
  overflow-wrap: anywhere;
}
.contact-mail:hover, .contact-mail:focus-visible { color: var(--pink-deep); border-color: var(--pink-deep); }
.contact-tel {
  font-weight: 800; color: var(--ink); text-decoration: none; font-size: 1.125rem;
}
.contact-tel:hover { color: var(--pink-deep); }
@media (max-width: 860px) {
  .contact .wrap { grid-template-columns: 1fr; }
}

/* ---------- patička ---------- */

.site-footer { padding-block: 2.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .875rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }
.site-footer a { color: var(--muted); }

/* ---------- reveal ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0; transform: translateY(18px); filter: blur(6px);
    transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease);
    transition-delay: var(--d, 0ms);
  }
  /* směrové varianty: bloky se scházejí ze stran */
  .js .reveal.from-left  { transform: translateX(-32px); }
  .js .reveal.from-right { transform: translateX(32px); }
  .js .reveal.is-in { opacity: 1; transform: none; filter: blur(0); }
}

/* ---------- print ---------- */

@media print {
  .site-header, .gallery, .skip, .blob, .fab { display: none; }
  body { background: #fff; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}