/* The established palette and type stay; each new layer has a single animator. */
.identity-hero .hero{background:radial-gradient(ellipse at 50% 48%,#122f594f,transparent 52%),#070a10}
.identity-hero .hero-copy,.cinema-on .identity-hero .hero-copy{left:0;top:50%;width:100%;z-index:2;text-align:center;transform-origin:50% 50%;margin-top:-180px;will-change:transform,opacity,filter}
.identity-hero .hero .eyebrow{font-size:9px;letter-spacing:3px;margin-bottom:30px;color:#91c3ec}
.identity-hero .hero h1{font-size:clamp(100px,17.5vw,270px);line-height:.78;letter-spacing:-.025em}
.identity-hero .hero h1>.name-idle{display:block;background:none;color:#eef7ff;-webkit-text-fill-color:initial;animation:nameBreath 5.8s ease-in-out infinite}
.name-line{display:block;white-space:nowrap}
.name-line:nth-child(2){color:#82caff}
.hero-portrait{position:absolute;z-index:4;bottom:12%;left:50%;width:clamp(290px,39vw,570px);height:75%;transform:translateX(-50%);transform-origin:50% 85%;pointer-events:none;will-change:transform,opacity,filter}
.portrait-idle{width:100%;height:100%;animation:portraitFloat 7s ease-in-out infinite}
.portrait-idle img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.portrait-note{position:absolute;bottom:1%;left:0;right:0;text-align:center;color:#82a6cb;font-size:6px;letter-spacing:1.7px}
.identity-hero .hero-art{display:none}
.identity-hero .hero-bottom{z-index:12;bottom:7%}
.identity-hero .hero-time{bottom:3.5%}
.identity-hero .hero-top{z-index:11}
.cinema-on .about-stage{border-radius:48px 48px 0 0}
.cinema-on .about .about-watermark{bottom:-50px}

/* The moving strip is the actual white/dark boundary, with no second border. */
.marquee,.cinema-on .marquee{background:linear-gradient(to bottom,#eaf2fa 0 50%,#070a10 50% 100%);border:0;transform:none!important;margin:-2px 0 0;padding:0;isolation:isolate;overflow:hidden;height:83px}
.marquee:before{content:'';position:absolute;inset:18px -12px 15px;background:#0a101b;transform:rotate(-1.3deg);z-index:-1}
.marquee>div,.cinema-on .marquee>div{display:flex;align-items:center;width:max-content;height:83px;animation:dividerLoop 32s linear infinite!important;transform:none;font-size:23px;line-height:1;color:#b8c9dc;font-family:var(--heading);font-weight:600;letter-spacing:1px;will-change:transform}
.marquee .marquee-group{display:flex;align-items:center;flex-shrink:0;color:inherit;margin:0}
.marquee .marquee-word{white-space:nowrap;display:block;margin:0 22px;color:inherit}
.marquee i{font-style:normal;color:var(--ice);font-size:23px;margin:0 12px}

.work .projects{gap:32px}
.cinema-on .work .project{width:min(70vw,calc(40svh * 16 / 9),980px);transform-origin:center center;will-change:transform,filter,opacity}
.work .project-art,.cinema-on .work .project-art{aspect-ratio:16/9;max-height:none;background:#050a12;isolation:isolate;box-shadow:0 0 calc(var(--focus,0)*70px) rgba(68,160,255,calc(var(--focus,0)*.18));transition:box-shadow .3s,border-color .3s}
.cinema-on .work-stage{padding-top:90px;padding-bottom:45px}
.cinema-on .work h2{font-size:clamp(56px,6.8vw,95px)}
.cinema-on .work .section-heading{margin-bottom:22px}
.cinema-on .work .section-label{margin-bottom:20px}
.cinema-on .work .filters{margin-bottom:20px}
.has-motion-video>*:not(video):not(.media-demo-label):not(.preview-play){display:none}
.has-motion-video:before,.has-motion-video:after{display:none}
.motion-video{display:block;width:100%;height:100%;object-fit:contain;background:#050a12;position:absolute;inset:0;z-index:1}
.media-demo-label{position:absolute;z-index:3;left:15px;bottom:12px;font-size:6px;letter-spacing:1.5px;color:#d1e6fb;pointer-events:none;text-shadow:0 1px 4px #000}
.work .has-motion-video .preview-play{z-index:4;opacity:0;bottom:11px;right:12px;width:28px;height:28px;font-size:17px}
.work .project:hover .preview-play,.work .project:focus-visible .preview-play{opacity:1}
.work .project[data-active="true"] .project-art{border-color:#82caff66}
.cinema-on .work .project-description{padding-top:12px}
.cinema-on .work .project-description h3{font-size:13px}
.cinema-on .work .work-controlbar{margin-top:14px}

.editing{position:relative;z-index:4;overflow:clip;background:radial-gradient(ellipse at 50% 50%,#12345a36,transparent 65%),#070a10;border-top:1px solid #92caff17;padding-top:90px;padding-bottom:80px}
.editing .section-label{margin-bottom:35px}
.editing-heading,.graphic-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-bottom:40px}
.editing-heading h2,.graphic-heading h2{font-size:clamp(68px,8.5vw,120px)}
.editing-heading h2>span{color:var(--ice)}
.editing-heading>div>p{font-size:16px;color:#d9e8f9;margin-bottom:12px}
.editing-heading>div>.tiny{font-size:7px;color:#6f89aa;letter-spacing:1.5px}
.video-wall{position:relative;margin:0 -9.55%;padding:12px 0;overflow:clip}
.video-row{display:flex;width:max-content;gap:20px;align-items:start;padding:12px 8vw;will-change:transform;transform:translate3d(var(--row-x,0px),0,0)}
.row-bottom{margin-top:14px}
.vertical-tile{width:clamp(135px,16vw,230px);flex-shrink:0;margin:0;transition:filter .35s,transform .35s;filter:brightness(.85)}
.vertical-tile:hover{filter:brightness(1);transform:translateY(-3px)}
.vertical-video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:contain;border:1px solid #8acfff2b;border-radius:5px;background:#08121f}
.vertical-tile figcaption{display:flex;gap:10px;align-items:center;margin-top:12px;font-size:8px;color:#8da6c5;white-space:nowrap}
.vertical-tile figcaption>span:first-child{font-family:var(--heading);font-size:16px;color:#92d3ff}
.wall-toolbar{display:flex;justify-content:space-between;align-items:center;margin-top:28px;gap:20px}
.wall-toolbar>.tiny{color:#6d87a9;font-size:7px}
.wall-playback,.graphic-reset{background:none;border:1px solid #79baff38;color:#abd9ff;padding:11px 14px;font-size:8px;letter-spacing:1px;transition:background .25s}
.wall-playback:hover,.graphic-reset:hover{background:#3c89ff22}
.wall-media-note{color:#6d829e;font-size:9px;line-height:1.8;margin:16px 0 0}

.graphics{background:#0b1421;position:relative;z-index:4;overflow:clip}
.graphics .section-label{margin-bottom:40px}
.graphic-heading>p{font-size:12px;line-height:1.9;color:#b1c4dc}
.graphic-heading>p>small{font-size:8px;color:#7089aa}
.graphic-grid{display:grid;grid-template-columns:var(--graphic-column-one,1fr) var(--graphic-column-two,1fr) var(--graphic-column-three,1fr);gap:25px;align-items:center;transition:grid-template-columns .7s cubic-bezier(.22,1,.36,1);padding:25px 0 10px}
.graphic-item{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:transparent;padding:0;color:inherit;opacity:0;transform:translateY(var(--reveal-y,20px)) scale(.97);transition:opacity .7s ease var(--reveal-delay,0ms),transform .7s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms),filter .55s;isolation:isolate}
.graphic-grid.graphic-revealed .graphic-item{opacity:1;transform:translateY(0) scale(1)}
.graphic-art{position:relative;display:flex;justify-content:center;align-items:center;max-width:100%;width:100%;overflow:hidden;background:#0a1625;border:1px solid #a4d3ff20;transition:box-shadow .6s}
.graphic-art:after{content:'';position:absolute;inset:-30% -120%;background:linear-gradient(110deg,transparent 35%,#e4f7ff50 49%,transparent 65%);transform:translateX(-30%);pointer-events:none;opacity:0}
.graphic-art img{display:block;width:100%;height:auto;max-height:390px;object-fit:contain;transition:transform .65s cubic-bezier(.22,1,.36,1);background:#0a1625}
.graphic-item-caption{display:block;align-self:flex-start;font-size:8px;color:#7c96b7;letter-spacing:1px;margin-top:13px;line-height:1.6;text-align:left}
.graphic-grid.has-active .graphic-item{filter:brightness(.68);transition-delay:0ms}
.graphic-grid.has-active .graphic-item.is-active{filter:brightness(1);z-index:2;transform:scale(1.025)}
.graphic-item.is-active .graphic-art{box-shadow:0 16px 60px #0005,0 0 35px #3690ff1a}
.graphic-item.is-active .graphic-art:after{opacity:1;animation:lightWipe .85s ease-out forwards}
.graphic-caption{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:30px;border-top:1px solid #8acfff20;padding-top:22px}
.graphic-caption>.tiny{font-size:7px;color:#7e9abb;line-height:1.8}
.header nav{gap:23px;margin-right:32px}
.header nav a{font-size:8px}

@keyframes nameBreath{0%,100%{opacity:1}17%{opacity:.92}28%{opacity:.98}42%{opacity:.87}55%{opacity:.96}71%{opacity:.91}83%{opacity:1}}
@keyframes portraitFloat{0%,100%{transform:translate3d(0,0,0)}35%{transform:translate3d(0,-7px,0)}68%{transform:translate3d(0,-3px,0)}}
@keyframes dividerLoop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes lightWipe{from{transform:translateX(-30%)}to{transform:translateX(75%)}}

@media(min-height:780px) and (min-width:761px){
  .cinema-on .work .project{width:min(62vw,calc(42svh * 16 / 9),940px)}
  .cinema-on .work-stage{justify-content:center}
  .cinema-on .work .project-art{max-height:none}
}

@media(max-width:1100px){
  .header nav{gap:18px;margin-right:25px}
  .hero-portrait{width:45vw;height:70%;bottom:13%}
  .identity-hero .hero-copy{margin-top:-140px}
  .identity-hero .hero h1{font-size:20vw}
  .graphic-grid{gap:18px}
  .graphic-art img{max-height:320px}
  .editing-heading h2,.graphic-heading h2{font-size:80px}
}

@media(max-width:760px){
  .identity-hero .hero-copy,.cinema-on .identity-hero .hero-copy{left:0;top:40%;margin-top:-100px;width:100%;text-align:center}
  .identity-hero .hero h1{font-size:clamp(92px,27vw,160px);line-height:.85}
  .identity-hero .hero .eyebrow{font-size:6px;letter-spacing:1.3px;margin-bottom:22px}
  .hero-portrait{width:85%;max-width:390px;height:65%;bottom:17%}
  .portrait-note{font-size:5px;bottom:0}
  .identity-hero .hero-bottom{bottom:10%;z-index:12}
  .identity-hero .hero-time{bottom:5%}
  .cinema-on .about-stage{border-radius:35px 35px 0 0}
  .marquee,.cinema-on .marquee,.marquee>div,.cinema-on .marquee>div{height:67px}
  .marquee>div,.cinema-on .marquee>div{font-size:19px}
  .marquee .marquee-word{margin:0 15px}
  .marquee i{font-size:20px;margin:0 8px}
  .marquee:before{inset:15px -12px 12px}
  .cinema-on .work .project{width:82vw}
  .cinema-on .work-stage{padding-top:90px;padding-bottom:45px;justify-content:center}
  .cinema-on .work .project-art{aspect-ratio:16/9;max-height:none}
  .cinema-on .work h2{font-size:62px}
  .cinema-on .work .section-heading{margin-bottom:20px}
  .cinema-on .work .section-label{margin-bottom:24px}
  .cinema-on .work .project-description h3{font-size:12px}
  .media-demo-label{font-size:5px;left:10px;bottom:9px}
  .editing{padding-top:65px;padding-bottom:55px}
  .editing .section-label{margin-bottom:25px}
  .editing-heading,.graphic-heading{display:block;margin-bottom:27px}
  .editing-heading h2,.graphic-heading h2{font-size:68px}
  .editing-heading>div{margin-top:22px}
  .editing-heading>div>p{font-size:13px;margin-bottom:9px}
  .editing-heading>div>.tiny{font-size:6px}
  .video-wall{margin:0 -6.85%}
  .video-row{padding:9px 6vw;gap:14px}
  .vertical-tile{width:clamp(115px,32vw,190px)}
  .row-bottom{margin-top:9px}
  .vertical-tile figcaption{font-size:6px;margin-top:8px;gap:7px}
  .vertical-tile figcaption>span:first-child{font-size:13px}
  .wall-toolbar{margin-top:22px}
  .wall-toolbar>.tiny{font-size:6px;letter-spacing:.8px}
  .wall-playback{font-size:6px;padding:10px;letter-spacing:.6px}
  .wall-media-note{font-size:8px}
  .graphics .section-label{margin-bottom:28px}
  .graphic-heading>p{font-size:11px;margin-top:22px}
  .graphic-grid{gap:20px 14px;grid-template-columns:1fr 1fr!important}
  .graphic-art img{max-height:290px}
  .graphic-item-caption{font-size:6px;letter-spacing:.3px;margin-top:9px}
  .graphic-grid.has-active .graphic-item.is-active{transform:scale(1.055)}
  .graphic-grid.has-active .graphic-item:not(.is-active){transform:scale(.95)}
  .graphic-caption{gap:12px}
  .graphic-caption>.tiny{font-size:6px;max-width:55%}
  .graphic-reset{font-size:6px;padding:10px;letter-spacing:.5px}
}

@media(max-height:779px) and (min-width:761px){
  .cinema-on .work .project{width:min(55vw,calc(37svh * 16 / 9),800px)}
  .cinema-on .work h2{font-size:55px}
  .cinema-on .work .section-label{margin-bottom:14px}
  .cinema-on .work .section-heading{margin-bottom:15px}
  .cinema-on .work .filters{margin-bottom:15px}
  .cinema-on .work-stage{padding-top:85px;padding-bottom:38px}
  .cinema-on .work .project-art{max-height:none}
  .identity-hero .hero-copy{margin-top:-145px}
  .hero-portrait{height:73%;bottom:13%}
}

@media(max-height:559px){
  .identity-hero .hero-copy,.cinema-on .identity-hero .hero-copy{transform:none!important;filter:none!important;opacity:1!important}
  .hero-portrait{transform:translateX(-50%)!important;filter:none!important;opacity:1!important}
  .cinema-on .work .project-art{max-height:none}
  .cinema-on .work .projects{padding:0!important}
  .marquee>div,.cinema-on .marquee>div{animation:dividerLoop 32s linear infinite!important}
  .editing .video-row{transform:none!important}
  .video-wall{overflow-x:auto}
  .video-row{max-width:none}
  .graphic-grid .graphic-item{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  .name-idle,.portrait-idle{animation:none!important}
  .hero-portrait{will-change:auto}
  .marquee>div,.cinema-on .marquee>div{animation:none!important}
  .video-row{transform:none!important;will-change:auto}
  .video-wall{overflow-x:auto}
  .graphic-item{opacity:1;transform:none}
  .graphic-grid,.graphic-item,.graphic-art:after{animation:none!important;transition:none!important}
  .graphic-grid.has-active .graphic-item.is-active{transform:none}
}

/* Hero: tampilkan foto utuh tanpa zoom dan tanpa pemotongan sisi. */
html.cinema-on{scroll-behavior:auto}
.cinema-on .hero-sequence{height:145svh}
.identity-hero .hero h1>.name-idle{animation:none}
.name-letter{display:inline-block;will-change:opacity}

.identity-hero .hero .portrait-idle{
  position:relative;
  width:100%;
  height:100%;
  overflow:visible;
  -webkit-mask-image:none;
  mask-image:none;
}

.identity-hero .hero .portrait-idle img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:contain;
  object-position:center bottom;
  transform:none;
  -webkit-mask-image:none;
  mask-image:none;
}

@media(max-width:760px){
  .cinema-on .hero-sequence{height:140svh}
}

@media(max-height:559px){
  .cinema-on .hero-sequence{height:auto}
}

@media(prefers-reduced-motion:reduce){
  .name-letter{opacity:1!important;will-change:auto}
}

/* Restore the original angled, scroll-driven text band. */
.marquee,.cinema-on .marquee{height:auto;padding:27px 0;margin:0 -4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0a0e16;transform:rotate(-2deg)!important;isolation:auto;position:relative;z-index:3}
.cinema-on .marquee{transform:rotate(calc(-3deg + var(--marquee-p,0) * 5deg))!important;margin-top:-1px}
.marquee:before{display:none}
.marquee>div,.cinema-on .marquee>div{height:auto;display:block;width:max-content;font-family:var(--heading);font-size:25px;font-weight:700;line-height:normal;letter-spacing:1px;color:#9aa5b7;animation:marquee 35s linear infinite!important;transform:none}
.cinema-on .marquee>div{animation:none!important;transform:translateX(var(--marquee-x,0px))!important}
.marquee span{color:var(--ice);margin:0 30px}

@media(max-width:760px){
  .marquee,.cinema-on .marquee{padding:20px 0}
  .marquee>div,.cinema-on .marquee>div{font-size:21px}
  .marquee span{margin:0 18px}
}

@media(prefers-reduced-motion:reduce){
  .marquee>div,.cinema-on .marquee>div{animation:none!important;transform:none!important}
}
/* Animasi masuk foto, dilanjutkan gerakan melayang */
.identity-hero .hero .portrait-idle {
  animation:
    portraitEntrance 1.4s cubic-bezier(.22, 1, .36, 1) both,
    portraitFloat 7s ease-in-out 1.4s infinite;
}

@keyframes portraitEntrance {
  from {
    opacity: 0;
    filter: blur(14px);
    transform: translate3d(0, 90px, 0);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

/* Ikuti preferensi pengguna yang mengurangi animasi */
@media (prefers-reduced-motion: reduce) {
  .identity-hero .hero .portrait-idle {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
  }
}
/* Perbesar sedikit dan turunkan posisi foto */
.identity-hero .hero .portrait-idle img {
  inset: auto;
  left: -20%;
  bottom: -200px;
  width: 135%;
  max-width: none;
  height: 135%;
  object-fit: contain;
  object-position: center bottom;

  /* Pudarkan hanya bagian bawah foto */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 75%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 75%,
    transparent 100%
  );
}
/* Hapus mask dari gambar */
.identity-hero .hero .portrait-idle img {
  -webkit-mask-image: none;
  mask-image: none;
}
.identity-hero .hero-copy,
.cinema-on .identity-hero .hero-copy {
  margin-top: -190px;
  animation: heroNameEnter 1s ease-out .5s backwards;
}

@keyframes heroNameEnter {
  from {
    opacity: 0;
    translate: 0 18px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (max-width: 760px) {
  .identity-hero .hero-copy,
  .cinema-on .identity-hero .hero-copy {
    margin-top: -140px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .identity-hero .hero-copy {
    animation: none;
    translate: none;
  }
}

/* Selected Work: a fixed spotlight and flat, centered frames. */
@media (min-height: 560px) {
  .cinema-on .work-viewport {
    isolation: isolate;
  }

  .cinema-on .work-viewport::before {
    content: "";
    position: absolute;
    inset: -22% -8%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 45%,
      #2478e773 0%, #174a9b55 30%, #102a5926 53%, transparent 72%);
  }

  .cinema-on .work .projects {
    gap: clamp(12px, 1.4vw, 24px);
  }

  .cinema-on .work .projects > .project {
    transform-origin: center center;
    transition: transform 320ms cubic-bezier(.22,1,.36,1), filter 320ms ease;
  }

  .cinema-on .work .projects > .project[data-work-depth="1"] {
    transform: translateX(var(--work-inward, 0%)) scale(.72);
    filter: brightness(.69);
  }

  .cinema-on .work .projects > .project[data-work-depth="2"] {
    transform: translateX(var(--work-inward, 0%)) scale(.59);
    filter: brightness(.46);
  }
}

@media (min-width: 761px) and (min-height: 560px) {
  .cinema-on .work .projects > .project {
    width: min(42.5vw, calc(40svh * 16 / 9), 980px);
  }
}