@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;600&display=swap');
/* About page: remove the white gap above the piano hero */
body.com-content.view-article #sp-main-body,
body.com-content.view-article #sp-component {
  padding-top: 0 !important;
  background: #faf9f3 !important;
}

body.com-content.view-article .sp-column .sp-module:first-child {
  margin-top: 0 !important;
}

body.com-content.view-article #jpiano {
  margin-top: 0 !important;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 100vh;
  background: var(--bg, #faf9f3);
  position: relative;
  z-index: 1;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Inner piano spacing */
.piano {
  padding-left: clamp(16px, 8vw, 120px);
  padding-right: clamp(16px, 8vw, 120px);
  gap: clamp(8px, 2.6vw, 40px);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  body.com-content.view-article #jpiano { height: 82vh; }
  .piano { gap: 3.6vw; padding-left: 8vw; padding-right: 8vw; }
}
@media (max-width: 480px) {
  body.com-content.view-article #jpiano { height: 74vh; }
  .piano { gap: 4.2vw; padding-left: 7vw; padding-right: 7vw; }
}

/* Keys height variation */
.piano .key:nth-child(1 of .key)::before { height: 64%; }
.piano .key:nth-child(2 of .key)::before { height: 72%; }
.piano .key:nth-child(3 of .key)::before { height: 82%; }
.piano .key:nth-child(4 of .key)::before { height: 92%; }
.piano .key:nth-child(5 of .key)::before { height: 98%; }
.piano .key:nth-child(6 of .key)::before { height: 82%; }
.piano .key:nth-child(7 of .key)::before { height: 72%; }
.piano .key:nth-child(8 of .key)::before { height: 64%; }

/* Piano spacing & key width */
body.com-content.view-article .piano {
  padding-left: 16vw !important;
  padding-right: 16vw !important;
  gap: 2.2vw !important;
}
body.com-content.view-article .piano .key::before {
  width: 75% !important;
}

/* Colors */
:root {
  --band-color: 240,235,221 !important;  /* #f0ebdd */
  --bg: #f6f2e6 !important;
  --hero-bottom-pad: 9vh;
  --bg-r: 246; --bg-g: 242; --bg-b: 230;
}

/* Fade overlay top + bottom */
body.com-content.view-article #jpiano::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 48px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.04) 100%);
}
body.com-content.view-article #jpiano::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 12vh;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    rgba(var(--bg-r),var(--bg-g),var(--bg-b), 1) 0%,
    rgba(var(--bg-r),var(--bg-g),var(--bg-b), .55) 30%,
    rgba(var(--bg-r),var(--bg-g),var(--bg-b), 0) 100%
  );
}
body.com-content.view-article #jpiano .piano {
  position: absolute;
  inset: 0 0 var(--hero-bottom-pad) 0;
  z-index: 1;
}

/* Hero text */
.piano-hero-text {
  font-family: 'Tinos', serif !important;
}
.piano-hero-text h1 {
  font-size: 42px;
  line-height: 1.3;
  font-weight: 400;
  margin-bottom: 4rem; /* more space below */
  font-family: 'Tinos', serif !important;
  color: inherit !important;
}
.piano-hero-text h5 {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.08em;
  margin-bottom: 2rem;
  color: #ac0000 !important;
}
.piano-hero-text p {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  margin-top: 1rem;
  letter-spacing: 0.08em;
  color: #ac0000 !important;
}
.piano-hero-text .scroll-indicator {
  letter-spacing: 0.08em;
  color: #ac0000 !important;
}

/* Scroll line with animation */
#jpiano .scroll-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 60px;
  width: 3px;
  height: 70px;
  background: #c0493b;
  border-radius: 2px;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
#jpiano .scroll-line::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  width: 100%;
  height: 32%;
  top: -40%;
  background: rgba(255,255,255,0.96);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset;
  animation: pianoScrollSlug 2.2s ease-in-out infinite;
}
@keyframes pianoScrollSlug {
  0%   { top: -40%; }
  50%  { top: 35%; }
  100% { top: 110%; }
}

/* Scroll text */
#jpiano .scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 3px;
  pointer-events: none;
  z-index: 3;
}

/* --- Fix hero spacing + scroll positions (overrides) --- */

/* 1) Restore gaps between small and big texts */
body.com-content.view-article #jpiano .piano-hero-text h5{
  margin-bottom: 2rem !important;   /* space under the small top line */
}
body.com-content.view-article #jpiano .piano-hero-text h1{
  margin-bottom: 4rem !important;   /* space under the big headline */
}
body.com-content.view-article #jpiano .piano-hero-text p{
  margin-top: 1.25rem !important;   /* small space above the paragraph */
}

/* 2) Make the red scroll line slimmer & a tad shorter, and keep it above "SCROLL" */
#jpiano .scroll-line{
  width: 2px !important;            /* slimmer */
  height: 64px !important;          /* slightly shorter */
  bottom: 48px !important;          /* leaves room for the word below */
}

/* 3) Put "SCROLL" 10px from the bottom */
#jpiano .scroll-indicator{
  bottom: 10px !important;
}

/* Make the overlay text ignore mouse/touch so keys remain clickable */
#jpiano .piano-hero-text,
#jpiano .piano-hero-text *{
  pointer-events: none !important;
  z-index: 2; /* still sits visually above keys */
}

/* If you ever need a clickable link/button inside the overlay, add class="clickable" */
#jpiano .piano-hero-text .clickable{
  pointer-events: auto !important;
}




/* === STEP 1: Fade-up animations for the overlay text === */

/* base keyframes: fade + slight lift */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px); /* ~1.6cm on many screens; tweak if needed */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* apply to each piece, with gentle staggering */
body.com-content.view-article #jpiano .piano-hero-text h5 {
  animation: fadeUp .8s ease-out .05s both;
}

body.com-content.view-article #jpiano .piano-hero-text h1 {
  animation: fadeUp .9s ease-out .25s both;
}

body.com-content.view-article #jpiano .piano-hero-text p {
  animation: fadeUp .8s ease-out .55s both;
}

/* “SCROLL” label comes last */
body.com-content.view-article #jpiano .scroll-indicator {
  animation: fadeUp .7s ease-out .9s both;
}

/* Recenter SCROLL exactly */
#jpiano .scroll-indicator{
  left: 50% !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
}

/* Keys grow down from the top on page load */
@keyframes keyGrow {
  from { transform: translateX(-50%) scaleY(0); }
  to   { transform: translateX(-50%) scaleY(1); }
}

/* Base: keep your translateX AND add scaleY animation */
.piano .key::before{
  transform-origin: top center;
  animation: keyGrow .9s ease-out forwards;
}

/* Nice stagger left→right */
.piano .key:nth-child(1)::before{ animation-delay: .05s; }
.piano .key:nth-child(2)::before{ animation-delay: .12s; }
.piano .key:nth-child(3)::before{ animation-delay: .19s; }
.piano .key:nth-child(4)::before{ animation-delay: .26s; }
.piano .key:nth-child(5)::before{ animation-delay: .33s; }
.piano .key:nth-child(6)::before{ animation-delay: .40s; }
.piano .key:nth-child(7)::before{ animation-delay: .47s; }
.piano .key:nth-child(8)::before{ animation-delay: .54s; }


/* Top-center LPME logo on every page */
#lpmeTopLogo{
  position: fixed;
  top: 20px;                     /* 20px from the very top */
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  pointer-events: none;          /* never blocks clicks */
  transition: opacity .25s ease, transform .25s ease;
}

#lpmeTopLogo img{
  max-width: 80px;              /* tweak size here */
  height: auto;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.08));
}

/* hidden state (we’ll toggle this with JS in the next step) */
#lpmeTopLogo.is-hidden{
  opacity: 0;
  transform: translateX(-50%) translateY(-6px);
}
/* Mobile adjustments for hero text */
@media (max-width: 768px) {
  body.com-content.view-article #jpiano .piano-hero-text h1 {
    font-size: 28px;   /* smaller than 42px */
    line-height: 1.4;  /* keep readability */
    text-align: center;
  }
}
/* Mobile hero fix: full screen height */
@media (max-width: 768px) {
  body.com-content.view-article #jpiano {
    height: 100vh !important; /* force full screen on mobile */
  }
}


/* Mobile: keep the stepped heights, just compress vertically */
@media (max-width: 768px){
  #jpiano .piano .key::before{
    transform: translateX(-50%) scaleY(0.72) !important; /* shorten all keys */
    transform-origin: top center !important;
  }
}

/* === FORCE STEPPED HEIGHTS (desktop & mobile) via CSS variables === */
#jpiano .piano .key::before{
  height: var(--key-h, 90%) !important;
}
#jpiano .piano > .key:nth-child(1){ --key-h: 64%; }
#jpiano .piano > .key:nth-child(2){ --key-h: 72%; }
#jpiano .piano > .key:nth-child(3){ --key-h: 82%; }
#jpiano .piano > .key:nth-child(4){ --key-h: 92%; }
#jpiano .piano > .key:nth-child(5){ --key-h: 98%; }
#jpiano .piano > .key:nth-child(6){ --key-h: 82%; }
#jpiano .piano > .key:nth-child(7){ --key-h: 72%; }
#jpiano .piano > .key:nth-child(8){ --key-h: 64%; }

@media (max-width: 768px){
  #jpiano .piano .key::before{
    height: calc(var(--key-h, 90%) * 0.72) !important;
  }
}
@media (max-width: 480px){
  #jpiano .piano .key::before{
    height: calc(var(--key-h, 90%) * 0.64) !important;
  }
}
/* Mobile: shift keys higher */
@media (max-width: 768px){
  :root {
    --hero-bottom-pad: 50vh;  /* increase to move keys up on mobile only */
  }
}


/* Remove any top gap before the first SmartSlider after the piano hero */
body.com-content.view-article #jpiano + * .n2-section-smartslider,
body.com-content.view-article #jpiano + * .n2-ss-slider,
body.com-content.view-article #jpiano + * .n2-ss-slider-wrapper,
body.com-content.view-article #jpiano + * .n2-ss-align {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* If the article inserted a paragraph above the slider (editor quirk), kill that margin only */
body.com-content.view-article #jpiano + * > p:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Make sure the area between them isn’t showing a white background from a parent wrapper */
body.com-content.view-article #jpiano + * {
  background: var(--bg, #f6f2e6) !important;
}

/* (Optional) hairline seam fixer if you still see a 1px line */
body.com-content.view-article #jpiano { margin-bottom: -1px !important; }


div#n2-ss-13 div.n2-ss-static-slide{
   z-index: -1;
}
/* Default black logo */
#lpmeTopLogo img {
  filter: brightness(0) invert(0); /* keeps black */
}

/* White version only on the video page */
.video-page #lpmeTopLogo img {
  filter: brightness(0) invert(1); /* turns logo white */
}

/* White version only on the video page */
.studios-page #lpmeTopLogo img {
  filter: brightness(0) invert(1); /* turns logo white */
}

.terms-page #lpmeTopLogo img {
  filter: brightness(0) invert(1); /* turns logo white */
}

.privacy-page #lpmeTopLogo img {
  filter: brightness(0) invert(1); /* turns logo white */
}

.news-page #lpmeTopLogo img {
  filter: brightness(0) invert(1); /* turns logo white */
}

.news-page #lpmeTopLogo img {
  filter: brightness(0) invert(1); /* turns logo white */
}

/* Hide the fixed top logo on the homepage only */
body.home #lpmeTopLogo,
body.frontpage #lpmeTopLogo,
body.itemid-101 #lpmeTopLogo {  /* adjust itemid if yours is different */
  display: none !important;
}





.lpme-tabs-wrap{
  --fg:#cfcfcf; --fg-active:#fff; --underline:#7a7a7a;
  --glow-h:3px; --underline-h:2px;
  --glow-shadow:0 0 12px rgba(255,255,255,.9),0 0 24px rgba(255,255,255,.6);
  --panel-maxw:920px; --panel-fade-ms:350ms; --bg-fade-ms:450ms;
  --tab-gap:2.2rem; --underline-overhang:32px;
  position:relative; min-height:100vh; display:grid; place-items:center; overflow:hidden;
}
.lpme-bg{position:absolute; inset:0; z-index:0; overflow:hidden;}
.lpme-bg-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity var(--bg-fade-ms) ease-in-out;}
.lpme-bg-video.is-active{opacity:1;}

.lpme-center{position:relative; z-index:1; width:min(92vw,1200px); margin-inline:auto; text-align:center; color:var(--fg); filter:drop-shadow(0 2px 16px rgba(0,0,0,.35));}

.lpme-tabs{position:relative; display:inline-flex; gap:var(--tab-gap); align-items:flex-end; padding-bottom:14px;}
.lpme-tab{all:unset; cursor:pointer; font-family:Arimo,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif; letter-spacing:.08em; font-size:clamp(14px,2vw,16px); line-height:1.2; color:var(--fg); padding:4px 2px; user-select:none;}
.lpme-tab.is-active{color:var(--fg-active);}

.lpme-underline{position:absolute; left:calc(-1 * var(--underline-overhang)); right:calc(-1 * var(--underline-overhang)); bottom:0; height:var(--underline-h); background:var(--underline); opacity:.9; border-radius:2px; pointer-events:none;}
.lpme-glowline{position:absolute; bottom:calc((var(--glow-h) - var(--underline-h)) * -0.5); height:var(--glow-h); width:10px; left:0; background:#fff; box-shadow:var(--glow-shadow); border-radius:999px; pointer-events:none; will-change:left,width; transition-property:left,width; transition-timing-function:ease-out;}

.lpme-panels{margin-top:22px; display:grid; place-items:center;}
.lpme-panel{width:100%; max-width:var(--panel-maxw); opacity:0; transform:translateY(8px); transition:opacity var(--panel-fade-ms) ease, transform var(--panel-fade-ms) ease; display:none;}
.lpme-panel.is-active{display:block; opacity:1; transform:translateY(0);}
.lpme-panel p{margin:0; font-size:clamp(16px,2.2vw,22px); line-height:1.5; color:#e8e8e8;}
.lpme-logos{margin-top:14px; display:inline-flex; gap:18px; align-items:center; opacity:.9;}
.lpme-logos img{height:28px; width:auto; filter:brightness(0) invert(1); opacity:.9;}

@media (max-width:420px){
  .lpme-tabs{gap:1.2rem;}
  .lpme-tabs-wrap{--underline-overhang:18px;}
}



/* 1) Dim background videos to ~40% when active */
.lpme-tabs-wrap .lpme-bg-video { 
  opacity: 0;                                /* keep hidden when inactive */
  transition: opacity var(--bg-fade-ms) ease-in-out;
}
.lpme-tabs-wrap .lpme-bg-video.is-active { 
  opacity: 0.3;                              /* was 1; now ~40% */
}

/* 2) Lock the tab content height and overlap panels (no vertical jump) */
.lpme-tabs-wrap .lpme-panels{
  position: relative;
  margin-top: 22px;
  /* Reserve enough space for the tallest panel (responsive). 
     Adjust clamp() bounds if you need more/less height. */
  min-height: clamp(220px, 26vw, 380px);
}

/* Overlap panels and fade between them, keeping the block height fixed */
.lpme-tabs-wrap .lpme-panel{
  position: absolute;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  max-width: var(--panel-maxw);
  margin: 0 auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--panel-fade-ms) ease, transform var(--panel-fade-ms) ease;
  pointer-events: none;     /* avoid accidental clicks on hidden panel */
  text-align: center;       /* keep your text centered */
}

.lpme-tabs-wrap .lpme-panel.is-active{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}



/* Increase horizontal space between tab titles */
.lpme-tabs-wrap .lpme-tabs {
  --tab-gap: 4rem;   /* was around 2.2rem — increase this to make more gap */
  gap: var(--tab-gap);
}
/* Ensure the slide area is the reference box */
.lpme-tabs-wrap{
  position: absolute;   /* fill the SmartSlider HTML layer */
  inset: 0;
  width: 100%;
  height: 100%;
}



/* --- FORCE TAB BAR VISIBLE ON MOBILE --- */
@media (max-width: 768px){

  /* Make sure the slide container allows scroll/visibility */
  .lpme-tabs-wrap{
    position: relative !important;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem 1rem;
    height: 100%;
    z-index: 10; /* above the videos */
  }

  /* Tab row */
  .lpme-tabs{
    display: flex;
    flex-wrap: wrap;          /* wrap if too narrow */
    justify-content: center;
    gap: 2rem !important;     /* more breathing room */
    margin-bottom: 1rem;
    z-index: 11;
    position: relative;
  }

  /* Buttons inside tab row */
  .lpme-tab{
    font-size: 14px;
    color: #fff;              /* ensure visible on dark bg */
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  }

  /* Make sure underline and glowline are not hidden */
  .lpme-underline,
  .lpme-glowline{
    bottom: 0 !important;
    z-index: 12;
  }

  /* Ensure panels don’t hide tabs */
  .lpme-panels{
    margin-top: 20px;
    min-height: auto;
    position: relative;
    z-index: 9;
  }
}

/* ---- MOBILE: fix Dolby/PMC logos layout ---- */
@media (max-width: 768px){
  .lpme-logos{
    flex-direction: column;       /* stack logos vertically on small screens */
    align-items: center;
    gap: 10px;                    /* space between logos */
  }

  .lpme-logos img{
    width: 230px !important;      /* smaller size */
    height: auto !important;
  }
}


/* ---- MOBILE: shift the whole tab element upward ---- */
@media (max-width: 768px){
  .lpme-center{
    transform: translateY(-50px);   /* move up; adjust -30px or -60px as needed */
  }
}









/* --- DISCOVER MORE CTA --- */
.lpme-cta{
  --gold: #d7bf7a;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;                /* space between text and line */
  margin-top: 22px;         /* gap from tab content above */
}
.lpme-cta a{
  color: var(--gold);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: letter-spacing 260ms ease, color 200ms ease;
  will-change: letter-spacing;
}
.lpme-cta-line{
  height: 2px;              /* thin gold line */
  background: var(--gold);
  width: calc(100% + 16px); /* slightly exceeds text width */
  transform-origin: center;
  transition: transform 260ms ease;
}
.lpme-cta:hover a{
  letter-spacing: 4px;      /* smooth letter-space on hover */
}
.lpme-cta:hover .lpme-cta-line{
  transform: scaleX(0.6);   /* “squeeze” the line on hover */
}

/* Optional: slightly larger tap target on mobile */
@media (max-width: 768px){
  .lpme-cta a{ letter-spacing: 0.1em; }
  .lpme-cta{ margin-top: 18px; }
}
#sp-logo { display: none !important; }
/* 1) Hide the top header logo */
#sp-logo { display: none !important; }