/* =========================================================
   CINEMATIC MODE / ARRIVAL LAYER
   File: /assets/css/cinematic.css
   ========================================================= */

body.cinematic-mode{
  --cinematic-amber-soft:rgba(201,178,143,.11);
  --cinematic-amber-faint:rgba(201,178,143,.055);
  --cinematic-ivory-faint:rgba(255,255,255,.026);
  --cinematic-surface:rgba(255,255,255,.030);
  --cinematic-surface-low:rgba(255,255,255,.012);
  --cinematic-edge:rgba(255,255,255,.070);
  background:
    radial-gradient(ellipse at 50% -8%, rgba(242,236,227,.052), transparent 30%),
    radial-gradient(circle at 50% 20%, var(--cinematic-amber-faint), transparent 24%),
    radial-gradient(circle at 12% 74%, rgba(255,255,255,.014), transparent 22%),
    linear-gradient(180deg, #020202 0%, #050505 34%, #020202 100%);
}

/* stronger ambient grain already built in main.css */
body.cinematic-mode::before{
  opacity:.18;
}

/* global vignette / immersion layer */
body.cinematic-mode::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0);
  will-change:opacity, filter, background;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(255,255,255,.042), transparent 18%),
    radial-gradient(circle at 72% 18%, rgba(201,178,143,.070), transparent 22%),
    radial-gradient(circle at 28% 72%, rgba(201,178,143,.045), transparent 25%),
    radial-gradient(circle at center, transparent 40%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.50) 100%),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.19) 44%, rgba(0,0,0,.31));
  mix-blend-mode:normal;
  opacity:1;
  transition:
    opacity .45s var(--ease),
    background .45s var(--ease),
    filter .45s var(--ease);
}

/* when cinematic transition is running, deepen the room */
body.cinematic-transition-active.cinematic-mode::after{
  background:
    radial-gradient(ellipse at 50% 12%, rgba(255,255,255,.052), transparent 17%),
    radial-gradient(circle at 68% 22%, rgba(201,178,143,.135), transparent 24%),
    radial-gradient(circle at 28% 68%, rgba(201,178,143,.070), transparent 28%),
    radial-gradient(circle at center, transparent 34%, rgba(0,0,0,.25) 70%, rgba(0,0,0,.66) 100%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.29) 42%, rgba(0,0,0,.48));
  opacity:1;
  filter:saturate(1.04);
}

/* subtle landing aura after cinematic transition */
body.cinematic-arrival-active.cinematic-mode::after{
  background:
    radial-gradient(ellipse at 50% 10%, rgba(255,255,255,.050), transparent 18%),
    radial-gradient(circle at 70% 20%, rgba(201,178,143,.110), transparent 23%),
    radial-gradient(circle at 28% 70%, rgba(201,178,143,.052), transparent 26%),
    radial-gradient(circle at center, transparent 42%, rgba(0,0,0,.18) 76%, rgba(0,0,0,.50) 100%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.20) 44%, rgba(0,0,0,.30));
}

/* lighter body vignette during mobile cinematic transition
   because main.css + custom JS veil already do a lot */
html[data-page-transition="cinematic-mobile"] body.cinematic-mode::after{
  opacity:.72;
  filter:saturate(1.01);
}

/* =========================================================
   QUIETER CHROME, STILL USABLE
   ========================================================= */

body.cinematic-mode .site-header,
body.cinematic-mode .site-footer,
body.cinematic-mode .floating-tools{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0);
  transition:
    opacity .45s var(--ease),
    transform .45s var(--ease),
    background .45s var(--ease),
    border-color .45s var(--ease),
    box-shadow .45s var(--ease),
    filter .45s var(--ease);
}

@media (hover:hover) and (pointer:fine){
  body.cinematic-mode .site-header{
    opacity:.18;
    transform:translateY(-8px);
    filter:saturate(.92);
    background:rgba(4,4,4,.34);
    border-bottom-color:rgba(255,255,255,.03);
    box-shadow:0 10px 26px rgba(0,0,0,.22);
  }

  body.cinematic-mode .site-header:hover,
  body.cinematic-mode .site-header:focus-within{
    opacity:.98;
    transform:translateZ(0);
    filter:none;
    background:rgba(8,8,8,.84);
    border-bottom-color:rgba(255,255,255,.08);
    box-shadow:0 16px 44px rgba(0,0,0,.30);
  }

  body.cinematic-mode .site-footer{
    opacity:.12;
    transform:translateY(8px);
  }

  body.cinematic-mode .site-footer:hover,
  body.cinematic-mode .site-footer:focus-within{
    opacity:.90;
    transform:translateZ(0);
  }

  body.cinematic-mode .floating-tools{
    opacity:.16;
    transform:translateY(6px);
  }

  body.cinematic-mode .floating-tools:hover,
  body.cinematic-mode .floating-tools:focus-within{
    opacity:.98;
    transform:translateZ(0);
  }
}

/* do not hide useful chrome too much on touch */
@media (hover:none), (pointer:coarse){
  body.cinematic-mode .site-header{
    opacity:.84;
    transform:translateZ(0);
    background:rgba(8,8,8,.62);
    border-bottom-color:rgba(255,255,255,.06);
  }

  body.cinematic-mode .site-footer{
    opacity:.52;
    transform:translateZ(0);
  }

  body.cinematic-mode .floating-tools{
    opacity:.92;
    transform:translateZ(0);
  }
}

/* do not dim menu overlay state */
body.cinematic-mode.mobile-menu-open .site-header,
html[data-mobile-menu="open"] body.cinematic-mode .site-header{
  opacity:1;
  transform:translateZ(0);
  filter:none;
}

/* during full transition hide chrome harder */
body.cinematic-transition-active .site-header,
body.cinematic-transition-active .site-footer,
body.cinematic-transition-active .floating-tools{
  opacity:0 !important;
  transform:translateY(-10px);
  filter:blur(4px);
  pointer-events:none;
}

/* =========================================================
   HERO AS MAIN STAGE
   ========================================================= */

body.cinematic-mode .hero-home .hero-image,
body.cinematic-mode .profile-hero .hero-image,
body.cinematic-mode .hero-ps .hero-image,
body.cinematic-mode .hero-cr .hero-image,
body.cinematic-mode .hero-raport .hero-image{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0);
  will-change:transform, filter, opacity;
  filter:saturate(.96) contrast(1.075) brightness(.74);
}

body.cinematic-mode .hero-home .hero-light,
body.cinematic-mode .profile-hero .hero-light,
body.cinematic-mode .hero-ps .hero-light,
body.cinematic-mode .hero-cr .hero-light,
body.cinematic-mode .hero-raport .hero-light{
  opacity:1.04;
  background:
    radial-gradient(ellipse at 50% 14%, rgba(255,255,255,.12), transparent 34%),
    radial-gradient(circle at 76% 20%, rgba(201,178,143,.205), transparent 21%),
    radial-gradient(circle at 22% 72%, rgba(201,178,143,.060), transparent 27%),
    linear-gradient(180deg, rgba(0,0,0,.08), transparent 38%, rgba(0,0,0,.10));
}

body.cinematic-mode .hero-home .hero-fade,
body.cinematic-mode .profile-hero .hero-fade,
body.cinematic-mode .hero-ps .hero-fade,
body.cinematic-mode .hero-cr .hero-fade,
body.cinematic-mode .hero-raport .hero-fade{
  background:
    linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.60) 32%, rgba(0,0,0,.16) 66%, rgba(0,0,0,.12) 100%),
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.15) 48%, rgba(0,0,0,.88) 100%);
}

body.cinematic-mode .hero-home .hero-copy,
body.cinematic-mode .profile-hero .hero-copy,
body.cinematic-mode .hero-ps .hero-copy,
body.cinematic-mode .hero-cr .hero-copy,
body.cinematic-mode .hero-raport .hero-copy{
  text-shadow:
    0 1px 0 rgba(0,0,0,.22),
    0 10px 30px rgba(0,0,0,.22),
    0 0 18px rgba(201,178,143,.03);
}

body.cinematic-mode .hero-home h1,
body.cinematic-mode .profile-hero h1,
body.cinematic-mode .hero-ps h1,
body.cinematic-mode .hero-cr h1,
body.cinematic-mode .hero-raport h1{
  letter-spacing:-0.038em;
}

body.cinematic-mode .hero-statement{
  color:rgba(242,236,227,.97);
}

body.cinematic-mode .memory-quote-block{
  border-top-color:rgba(255,255,255,.12);
}

/* landing pulse after arrival */
body.cinematic-arrival-active .hero-home .hero-image,
body.cinematic-arrival-active .profile-hero .hero-image,
body.cinematic-arrival-active .hero-ps .hero-image,
body.cinematic-arrival-active .hero-cr .hero-image,
body.cinematic-arrival-active .hero-raport .hero-image{
  animation:cinematicArrivalImage 1.12s cubic-bezier(.16,1,.30,1) both;
}

body.cinematic-arrival-active .hero-home .hero-copy,
body.cinematic-arrival-active .profile-hero .hero-copy,
body.cinematic-arrival-active .hero-ps .hero-copy,
body.cinematic-arrival-active .hero-cr .hero-copy,
body.cinematic-arrival-active .hero-raport .hero-copy{
  animation:cinematicArrivalCopy .96s cubic-bezier(.16,1,.30,1) .08s both;
}

body.cinematic-arrival-active .hero-home .hero-side,
body.cinematic-arrival-active .profile-hero .hero-side,
body.cinematic-arrival-active .hero-ps .hero-side,
body.cinematic-arrival-active .hero-cr .hero-side,
body.cinematic-arrival-active .hero-raport .hero-side{
  animation:cinematicArrivalPanel 1s cubic-bezier(.16,1,.30,1) .16s both;
}

/* =========================================================
   BREATHING ROOM
   ========================================================= */

body.cinematic-mode .section{
  padding:124px 0;
}

body.cinematic-mode .continue-section{
  padding-top:40px;
  padding-bottom:10px;
}

/* =========================================================
   PANELS / CARDS
   ========================================================= */

body.cinematic-mode .content-panel,
body.cinematic-mode .card,
body.cinematic-mode .glass-panel,
body.cinematic-mode .timeline-item{
  border-color:var(--cinematic-edge);
  background:
    linear-gradient(180deg, var(--cinematic-surface), var(--cinematic-surface-low)),
    radial-gradient(circle at 82% 0%, rgba(201,178,143,.074), transparent 38%),
    radial-gradient(circle at 8% 100%, rgba(255,255,255,.018), transparent 30%);
  box-shadow:
    0 34px 100px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.026),
    inset 0 -1px 0 rgba(0,0,0,.22);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

body.cinematic-mode .content-panel:hover,
body.cinematic-mode .card:hover,
body.cinematic-mode .glass-panel:hover,
body.cinematic-mode .timeline-item:hover{
  border-color:rgba(255,255,255,.105);
  box-shadow:
    0 44px 120px rgba(0,0,0,.56),
    0 0 0 1px rgba(201,178,143,.030),
    inset 0 1px 0 rgba(255,255,255,.034),
    inset 0 -1px 0 rgba(0,0,0,.24);
}

/* project cards feel more like portal tabs */
body.cinematic-mode .project-card{
  box-shadow:
    0 38px 110px rgba(0,0,0,.50),
    0 0 0 1px rgba(201,178,143,.022),
    inset 0 1px 0 rgba(255,255,255,.026),
    inset 0 -1px 0 rgba(0,0,0,.22);
}

@media (hover:hover) and (pointer:fine){
  body.cinematic-mode .project-card:hover{
    transform:translateY(-7px) scale(1.006);
  }
}

body.cinematic-mode .project-card::after{
  opacity:.34;
}

body.cinematic-mode .project-media{
  filter:saturate(.88) contrast(1.055) brightness(.82);
}

body.cinematic-mode .project-media::before{
  background:
    linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.30)),
    radial-gradient(circle at 68% 20%, rgba(201,178,143,0.15), transparent 42%),
    radial-gradient(circle at 24% 78%, rgba(255,255,255,0.035), transparent 35%);
}

body.cinematic-mode .project-media::after{
  background:
    linear-gradient(180deg, transparent 0%, rgba(6,6,6,0.62) 100%),
    radial-gradient(circle at center, transparent 42%, rgba(0,0,0,.20) 100%);
}

/* specific polish for the two entry cards */
body.cinematic-mode .cinematic-entry-card{
  transform-origin:center center;
  will-change:transform, box-shadow, filter;
}

body.cinematic-mode .cinematic-entry-card .project-media{
  will-change:transform, filter;
}

body.cinematic-mode .cinematic-entry-card .project-body{
  will-change:transform, opacity;
}

/* =========================================================
   TYPOGRAPHY / TEXT
   ========================================================= */

body.cinematic-mode .section-note,
body.cinematic-mode p,
body.cinematic-mode .panel-text,
body.cinematic-mode .hero-lead,
body.cinematic-mode .memory-quote-text,
body.cinematic-mode .timeline-item p,
body.cinematic-mode .institution-item,
body.cinematic-mode .recognition-item p,
body.cinematic-mode .project-body p,
body.cinematic-mode .mini-card p,
body.cinematic-mode .content-panel p{
  color:rgba(242,236,227,.82);
}

body.cinematic-mode .panel-quote,
body.cinematic-mode h1,
body.cinematic-mode h2,
body.cinematic-mode h3,
body.cinematic-mode .hero-statement,
body.cinematic-mode .card-entry{
  color:rgba(245,239,229,.98);
}

body.cinematic-mode .section-kicker,
body.cinematic-mode .panel-label,
body.cinematic-mode .memory-quote-label,
body.cinematic-mode .timeline-label,
body.cinematic-mode .recognition-title{
  color:rgba(201,178,143,.92);
}

body.cinematic-mode .chip{
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.018);
  color:rgba(242,236,227,.62);
}

/* =========================================================
   BUTTONS / CONTROLS
   ========================================================= */

body.cinematic-mode .btn-secondary,
body.cinematic-mode .btn-tertiary,
body.cinematic-mode .contact-link,
body.cinematic-mode .tool-button{
  opacity:.95;
}

body.cinematic-mode .btn-secondary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.042), rgba(255,255,255,.020)),
    radial-gradient(circle at top right, rgba(201,178,143,.095), transparent 46%);
  border-color:rgba(255,255,255,.105);
  box-shadow:
    0 18px 42px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.030);
}

body.cinematic-mode .btn-secondary:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.062), rgba(255,255,255,.032)),
    radial-gradient(circle at top right, rgba(201,178,143,.130), transparent 46%);
  border-color:rgba(255,255,255,.17);
  box-shadow:
    0 22px 50px rgba(0,0,0,.31),
    inset 0 1px 0 rgba(255,255,255,.040);
}

body.cinematic-mode .btn-tertiary{
  color:rgba(242,236,227,.84);
}

body.cinematic-mode .btn-tertiary:hover{
  color:#fff;
}

body.cinematic-mode .contact-link,
body.cinematic-mode .tool-button{
  background:
    linear-gradient(180deg, rgba(28,28,28,.78), rgba(12,12,12,.72)),
    radial-gradient(circle at top right, rgba(201,178,143,.060), transparent 50%);
  border-color:rgba(255,255,255,.090);
  box-shadow:
    0 18px 44px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.024);
}

body.cinematic-mode .contact-link:hover,
body.cinematic-mode .tool-button:hover{
  background:
    linear-gradient(180deg, rgba(34,34,34,.94), rgba(16,16,16,.88)),
    radial-gradient(circle at top right, rgba(201,178,143,.090), transparent 50%);
  border-color:rgba(255,255,255,.165);
  box-shadow:
    0 22px 52px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.034);
}

/* mobile cinematic floating button */
body.cinematic-mode .mobile-cinematic-fab{
  background:
    linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.032)),
    radial-gradient(circle at top right, rgba(201,178,143,.16), transparent 44%);
  border-color:rgba(255,255,255,.10);
  box-shadow:
    0 22px 46px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.04);
}

body.cinematic-mode .mobile-cinematic-fab:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.072), rgba(255,255,255,.040)),
    radial-gradient(circle at top right, rgba(201,178,143,.20), transparent 46%);
  border-color:rgba(255,255,255,.15);
  box-shadow:
    0 26px 52px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.05);
}

body.cinematic-mode .mobile-cinematic-fab[data-active="true"]{
  border-color:rgba(201,178,143,.30);
  background:
    linear-gradient(180deg, rgba(255,255,255,.076), rgba(255,255,255,.040)),
    radial-gradient(circle at top right, rgba(201,178,143,.24), transparent 48%);
  box-shadow:
    0 26px 56px rgba(0,0,0,.40),
    inset 0 0 0 1px rgba(201,178,143,.10);
}

body.cinematic-mode .mobile-cinematic-fab[data-active="true"]::after{
  color:var(--accent);
}

/* =========================================================
   TIMELINE / LISTS
   ========================================================= */

body.cinematic-mode .timeline::before{
  background:linear-gradient(180deg, rgba(201,178,143,.31), rgba(255,255,255,.05));
}

body.cinematic-mode .timeline-item::before{
  background:rgba(201,178,143,.96);
  box-shadow:
    0 0 0 5px rgba(201,178,143,.08),
    0 0 18px rgba(201,178,143,.15);
}

body.cinematic-mode .recognition-item{
  border-left-color:rgba(201,178,143,.34);
}

body.cinematic-mode .institution-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.012));
  border-color:rgba(255,255,255,.08);
}

/* =========================================================
   SMALL TEXT POLISH
   ========================================================= */

body.cinematic-mode .memory-quote-text,
body.cinematic-mode .panel-quote{
  text-wrap:balance;
}

/* =========================================================
   MOBILE MENU
   ========================================================= */

body.cinematic-mode .mobile-menu-overlay{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(242,236,227,.055), transparent 26%),
    radial-gradient(circle at 74% 12%, rgba(201,178,143,.105), transparent 28%),
    linear-gradient(180deg, rgba(6,6,6,.99), rgba(7,7,7,.995));
}

/* =========================================================
   ARRIVAL KEYFRAMES
   ========================================================= */

@keyframes cinematicArrivalImage{
  0%{
    opacity:.76;
    transform:translateZ(0) scale(1.08);
    filter:saturate(1.04) contrast(1.10) brightness(.60);
  }
  100%{
    opacity:1;
    transform:translateZ(0) scale(1);
    filter:saturate(.96) contrast(1.075) brightness(.74);
  }
}

@keyframes cinematicArrivalCopy{
  0%{
    opacity:0;
    transform:translate3d(0,26px,0);
    filter:blur(14px);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
    filter:blur(0);
  }
}

@keyframes cinematicArrivalPanel{
  0%{
    opacity:0;
    transform:translate3d(0,32px,0) scale(.97);
    filter:blur(16px);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:blur(0);
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

body.reduced-motion.cinematic-mode .hero-home .hero-image,
body.reduced-motion.cinematic-mode .profile-hero .hero-image,
body.reduced-motion.cinematic-mode .hero-ps .hero-image,
body.reduced-motion.cinematic-mode .hero-cr .hero-image,
body.reduced-motion.cinematic-mode .hero-raport .hero-image{
  transform:none;
}

body.reduced-motion.cinematic-arrival-active .hero-home .hero-image,
body.reduced-motion.cinematic-arrival-active .profile-hero .hero-image,
body.reduced-motion.cinematic-arrival-active .hero-ps .hero-image,
body.reduced-motion.cinematic-arrival-active .hero-cr .hero-image,
body.reduced-motion.cinematic-arrival-active .hero-raport .hero-image,
body.reduced-motion.cinematic-arrival-active .hero-home .hero-copy,
body.reduced-motion.cinematic-arrival-active .profile-hero .hero-copy,
body.reduced-motion.cinematic-arrival-active .hero-ps .hero-copy,
body.reduced-motion.cinematic-arrival-active .hero-cr .hero-copy,
body.reduced-motion.cinematic-arrival-active .hero-raport .hero-copy,
body.reduced-motion.cinematic-arrival-active .hero-home .hero-side,
body.reduced-motion.cinematic-arrival-active .profile-hero .hero-side,
body.reduced-motion.cinematic-arrival-active .hero-ps .hero-side,
body.reduced-motion.cinematic-arrival-active .hero-cr .hero-side,
body.reduced-motion.cinematic-arrival-active .hero-raport .hero-side{
  animation:none !important;
}

/* =========================================================
   MOBILE TUNING
   ========================================================= */

@media (max-width:760px){
  body.cinematic-mode::after{
    background:
      radial-gradient(circle at 50% 15%, rgba(255,255,255,.030), transparent 18%),
      radial-gradient(circle at 50% 28%, rgba(201,178,143,.08), transparent 22%),
      radial-gradient(circle at center, transparent 48%, rgba(0,0,0,.14) 78%, rgba(0,0,0,.38) 100%),
      linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.14) 42%, rgba(0,0,0,.22));
  }

  body.cinematic-transition-active.cinematic-mode::after{
    background:
      radial-gradient(circle at 50% 16%, rgba(255,255,255,.030), transparent 16%),
      radial-gradient(circle at 50% 30%, rgba(201,178,143,.10), transparent 22%),
      radial-gradient(circle at center, transparent 46%, rgba(0,0,0,.18) 78%, rgba(0,0,0,.42) 100%),
      linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.16) 42%, rgba(0,0,0,.26));
    opacity:.92;
    filter:saturate(1.02);
  }

  html[data-page-transition="cinematic-mobile"] body.cinematic-mode::after{
    opacity:.62;
    filter:none;
  }

  body.cinematic-mode .section{
    padding:98px 0;
  }

  body.cinematic-mode .hero-home .hero-image,
  body.cinematic-mode .profile-hero .hero-image,
  body.cinematic-mode .hero-ps .hero-image,
  body.cinematic-mode .hero-cr .hero-image,
  body.cinematic-mode .hero-raport .hero-image{
    transform:none;
    filter:saturate(.95) contrast(1.03) brightness(.84);
  }

  body.cinematic-mode .hero-home .hero-fade,
  body.cinematic-mode .profile-hero .hero-fade,
  body.cinematic-mode .hero-ps .hero-fade,
  body.cinematic-mode .hero-cr .hero-fade,
  body.cinematic-mode .hero-raport .hero-fade{
    background:
      linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.16) 30%, rgba(0,0,0,.62) 100%);
  }

  body.cinematic-mode .project-card:hover{
    transform:translateY(-4px);
  }

  body.cinematic-mode .site-header{
    opacity:.88;
    background:rgba(8,8,8,.68);
  }

  body.cinematic-mode .floating-tools{
    opacity:.96;
  }

  body.cinematic-mode .mobile-cinematic-fab{
    box-shadow:
      0 20px 42px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.04);
  }

  body.cinematic-arrival-active .hero-home .hero-image,
  body.cinematic-arrival-active .profile-hero .hero-image,
  body.cinematic-arrival-active .hero-ps .hero-image,
  body.cinematic-arrival-active .hero-cr .hero-image,
  body.cinematic-arrival-active .hero-raport .hero-image{
    animation:cinematicArrivalImage .96s cubic-bezier(.16,1,.30,1) both;
  }
}

@media (max-width:480px){
  body.cinematic-mode .section{
    padding:90px 0;
  }

  body.cinematic-mode::after{
    background:
      radial-gradient(circle at 50% 14%, rgba(255,255,255,.026), transparent 16%),
      radial-gradient(circle at 50% 26%, rgba(201,178,143,.07), transparent 20%),
      radial-gradient(circle at center, transparent 50%, rgba(0,0,0,.12) 80%, rgba(0,0,0,.34) 100%),
      linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.12) 42%, rgba(0,0,0,.20));
  }

  body.cinematic-transition-active.cinematic-mode::after{
    background:
      radial-gradient(circle at 50% 15%, rgba(255,255,255,.026), transparent 15%),
      radial-gradient(circle at 50% 28%, rgba(201,178,143,.08), transparent 18%),
      radial-gradient(circle at center, transparent 52%, rgba(0,0,0,.16) 82%, rgba(0,0,0,.36) 100%),
      linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.12) 40%, rgba(0,0,0,.22));
    opacity:.90;
  }

  html[data-page-transition="cinematic-mobile"] body.cinematic-mode::after{
    opacity:.56;
  }

  body.cinematic-mode .hero-home .hero-image,
  body.cinematic-mode .profile-hero .hero-image,
  body.cinematic-mode .hero-ps .hero-image,
  body.cinematic-mode .hero-cr .hero-image,
  body.cinematic-mode .hero-raport .hero-image{
    filter:saturate(.96) contrast(1.03) brightness(.86);
  }

  body.cinematic-mode .mobile-cinematic-fab{
    box-shadow:
      0 18px 38px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.04);
  }
}