/* ════════════════════════════════════════════════════════════════


   HERO-NEW: HJSD-inspired white landing hero


   Alpha 阿爾法投資


   ════════════════════════════════════════════════════════════════ */





/* Hero Curtain Transition */


.hero-curtain {


  position: fixed;


  inset: 0;


  z-index: 9998;


  pointer-events: none;


  overflow: hidden;


}


.hero-curtain__strip {


  position: absolute;


  inset: 0;


  background: #eef0ec;


  transform-origin: bottom center;


  transform: scaleY(1);


}





/* New Hero Section */


.s-hero-new {


  position: relative;
  --hl1-a: #0e6b47;
  --hl1-b: #1ea368;
  --hl2-a: #0e6b47;
  --hl2-b: #1ea368;


  width: 100%;


  height: 100vh;
  min-height: 100vh;


  background:
    radial-gradient(circle at 22% 18%, rgba(201, 168, 76, 0.08), transparent 28%),
    radial-gradient(circle at 78% 36%, rgba(14, 107, 71, 0.06), transparent 30%),
    linear-gradient(135deg, #f1f2ee 0%, #e7eae5 52%, #f4f2ec 100%);


  overflow: hidden;


  display: flex;


  flex-direction: column;


}





/* Photo Collage Container */


.s-hero-new__collage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: spinCarousel 20s linear infinite;
}

@keyframes spinCarousel {
  from { transform: rotateX(-15deg) rotateZ(-5deg) rotateY(0deg); }
  to   { transform: rotateX(-15deg) rotateZ(-5deg) rotateY(360deg); }
}

/* Cleaned up garbage */

.s-hero-new__content {
  position: absolute;
  left: clamp(20px, 8vw, 150px);
  bottom: clamp(100px, 15vh, 200px); /* Leave room for ticker */
  z-index: 10;
  display: flex;
  flex-direction: column;
  max-width: 65%;
  pointer-events: auto;
}





/* Shared headline/subtitle space */

.s-hero-new__headline-spacer {
  flex: 0 0 auto;
  height: clamp(92px, 11vw, 174px);
  margin-bottom: clamp(14px, 2vw, 28px);
}

.s-hero-new__subcopy-spacer {
  flex: 0 0 auto;
  height: clamp(31px, 3.2vw, 51px);
}

/* Sub-copy */


.s-hero-new__subcopy {


  font-family: 'Outfit', sans-serif;


  font-size: clamp(11px, 1.15vw, 15px);


  font-weight: 400;


  color: #999;


  letter-spacing: 0.1em;


  margin-bottom: clamp(20px, 2.5vw, 36px);


  opacity: 0;


  transform: translateY(18px);


  transition: opacity 0.7s ease, transform 0.7s ease;


}


.s-hero-new__subcopy.is-in { opacity: 1; transform: translateY(0); }





/* Description */


.s-hero-new__desc {


  font-family: 'Noto Sans TC', sans-serif;


  font-size: clamp(12px, 1.2vw, 16px);


  font-weight: 300;


  color: #444;


  line-height: 2.4;


  letter-spacing: 0.035em;


  max-width: 520px;


  opacity: 0;


  transform: translateY(20px);


  transition: opacity 0.8s ease, transform 0.8s ease;


}


.s-hero-new__desc.is-in { opacity: 1; transform: translateY(0); }





/* Scroll Indicator */


.s-hero-new__scroll {


  position: absolute;


  bottom: clamp(56px, 7vh, 90px);


  left: clamp(28px, 6.5vw, 110px);


  display: flex;


  flex-direction: column;


  align-items: flex-start;


  gap: 8px;


  z-index: 20;


  opacity: 0;


  transition: opacity 0.6s ease;


}


.s-hero-new__scroll.is-in { opacity: 1; }


.s-hero-new__scroll-label {


  font-family: 'Outfit', sans-serif;


  font-size: 9px;


  letter-spacing: 0.3em;


  color: #aaa;


  text-transform: uppercase;


}


.s-hero-new__scroll-line {


  width: 1px;


  height: 48px;


  background: linear-gradient(to bottom, #555, transparent);


  animation: scroll-pulse 2s ease-in-out infinite;


}


@keyframes scroll-pulse {


  0%   { transform: scaleY(0); transform-origin: top; }


  48%  { transform: scaleY(1); transform-origin: top; }


  50%  { transform: scaleY(1); transform-origin: bottom; }


  100% { transform: scaleY(0); transform-origin: bottom; }


}





/* Ticker / Infinite Marquee */


.s-hero-new__ticker {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  width: 100%;
  overflow: hidden;
  background: #111;
  padding: clamp(14px, 2vh, 22px) 0;
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}


.s-hero-new__ticker.is-in { opacity: 1; transform: translateY(0); }





.s-hero-new__ticker-track {


  display: flex;


  align-items: center;


  white-space: nowrap;


  will-change: transform;


  animation: marquee 26s linear infinite;


  width: max-content;


}


.s-hero-new__ticker:hover .s-hero-new__ticker-track {


  animation-play-state: paused;


}





.s-hero-new__ticker-group {


  display: inline-flex;


  align-items: center;


  gap: clamp(20px, 2.5vw, 44px);


  padding-right: clamp(20px, 2.5vw, 44px);


  flex-shrink: 0;


}





.s-hero-new__ticker-text {


  font-family: 'Outfit', 'Noto Sans TC', sans-serif;


  font-size: clamp(22px, 3vw, 48px);


  font-weight: 200;


  letter-spacing: 0.14em;


  color: #f5f5f0;


  white-space: nowrap;


}





.s-hero-new__ticker-sep {


  font-family: serif;


  font-size: clamp(16px, 2vw, 28px);


  color: #c9a84c;


  flex-shrink: 0;


  line-height: 1;


}





@keyframes marquee {


  from { transform: translateX(0); }


  to   { transform: translateX(-50%); }


}





/* Header color overrides on white hero */


.on-white-hero .p-header__logo-name {


  color: #111 !important;


  transition: color 0.4s ease;


}


.on-white-hero .p-header__logo-alpha { color: #c9a84c !important; }


.on-white-hero .c-burger { border-color: rgba(0,0,0,0.22) !important; }


.on-white-hero .c-burger__line { background: #111 !important; }


.on-white-hero .c-burger__label { color: #111 !important; }





/* Body background transition for white hero */
body.on-white-hero {
  background: #eef0ec;
  transition: background 0.6s ease;
}
body {
  transition: background 0.6s ease;
}

/* Responsive */
@media (max-width: 960px) {


  .s-hero-new__content { max-width: 100%; }


  .s-hero-new__collage { opacity: 0.35; }


  }
@media (max-width: 600px) {


  .s-hero-new__collage { display: none; }


  .s-hero-new__content { max-width: 100%; padding: 90px 24px 40px; }


}









.s-hero-new__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}






.s-hero-new__photo {
  position: absolute;
  overflow: hidden;
  border-radius: 12px;
  width: clamp(180px, 20vw, 320px);
  height: clamp(130px, 15vw, 240px);
  left: calc(50% - 160px);
  top: calc(40% - 120px); /* Moved higher up */
  transform-origin: center center;
  backface-visibility: visible;
  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.s-hero-new__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Scattered 3D Cylinder */









.s-hero-new__collage-wrapper {
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 15%;
  perspective: 1500px;
  perspective-origin: center center;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

.s-hero-new__collage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30%; /* Shift right */
  right: 0;
  transform-style: preserve-3d;
  animation: spinCarousel 40s linear infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s-hero-new__photo {
  position: absolute;
  overflow: hidden;
  border-radius: 12px;
  width: clamp(180px, 20vw, 320px);
  height: clamp(130px, 15vw, 240px);
  /* Use fixed positioning to keep them centered before transform */
  left: calc(50% - 160px);
  top: calc(40% - 120px);
  transform-origin: center center;
  backface-visibility: visible;
  box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}

.s-hero-new__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes spinCarousel {
  0%   { transform: rotateX(-15deg) rotateZ(-5deg) rotateY(0deg); }
  100% { transform: rotateX(-15deg) rotateZ(-5deg) rotateY(-360deg); }
}

/* Scattered 3D Cylinder */








.s-hero-new__photo {
  position: absolute;
  overflow: hidden;
  border-radius: 12px;
  width: clamp(140px, 16vw, 260px);
  height: clamp(100px, 12vw, 200px);
  left: calc(50% - 130px);
  top: calc(50% - 100px);
  transform-origin: center center;
  backface-visibility: visible;
  box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}

.s-hero-new__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Scattered 3D Cylinder with tighter radius */
.s-hero-new__photo--1 { transform: rotateY(0deg) translateZ(350px) translateY(-50px) scale(1.1); }
.s-hero-new__photo--2 { transform: rotateY(51.4deg) translateZ(280px) translateY(80px) scale(0.85); }
.s-hero-new__photo--3 { transform: rotateY(102.8deg) translateZ(380px) translateY(-20px) scale(1.05); }
.s-hero-new__photo--4 { transform: rotateY(154.2deg) translateZ(290px) translateY(50px) scale(0.9); }
.s-hero-new__photo--5 { transform: rotateY(205.7deg) translateZ(360px) translateY(-70px) scale(1.15); }
.s-hero-new__photo--6 { transform: rotateY(257.1deg) translateZ(250px) translateY(70px) scale(0.8); }
.s-hero-new__photo--7 { transform: rotateY(308.5deg) translateZ(370px) translateY(-30px) scale(1.0); }

/* HJSD-style centered 3D photo carousel */
.s-hero-new__collage-wrapper {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: visible;
  pointer-events: none;
  perspective: 1800px;
  perspective-origin: 50% 46%;
  transform-origin: 50% 48%;
  will-change: transform, opacity;
}

.s-hero-new::before,
.s-hero-new::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.s-hero-new::before {
  z-index: 0;
  opacity: 0.38;
  background-image:
    linear-gradient(90deg, rgba(14, 32, 26, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(14, 32, 26, 0.06) 1px, transparent 1px);
  background-size: 12.5vw 100%, 100% 18vh;
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}

.s-hero-new::after {
  z-index: 1;
  opacity: 0.42;
  background:
    linear-gradient(105deg, transparent 0 31%, rgba(201, 168, 76, 0.14) 32%, transparent 34% 100%),
    linear-gradient(72deg, transparent 0 56%, rgba(14, 107, 71, 0.12) 57%, transparent 59% 100%),
    linear-gradient(156deg, transparent 0 66%, rgba(17, 91, 140, 0.09) 67%, transparent 69% 100%);
  background-size: 180% 100%, 210% 100%, 240% 100%;
  filter: blur(0.2px);
  animation: heroCurrentFlow 11s linear infinite;
  mix-blend-mode: multiply;
}

@keyframes heroCurrentFlow {
  0% {
    background-position: 120% 0, -80% 0, 140% 0;
  }
  100% {
    background-position: -80% 0, 120% 0, -100% 0;
  }
}

.s-hero-new__collage {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(86vw, 1180px);
  height: min(72vh, 720px);
  display: block;
  transform-style: preserve-3d;
  transform-origin: center center;
  animation: spinCarousel 34s linear infinite;
  will-change: transform;
}

.s-hero-new__photo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(300px, 28vw, 520px);
  height: clamp(220px, 21vw, 390px);
  margin-left: calc(clamp(300px, 28vw, 520px) / -2);
  margin-top: calc(clamp(220px, 21vw, 390px) / -2);
  overflow: hidden;
  border-radius: 8px;
  transform-origin: center center;
  backface-visibility: visible;
  box-shadow: 0 26px 60px rgba(17, 24, 39, 0.22);
}

.s-hero-new__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes spinCarousel {
  0%   { transform: translate(-50%, -50%) rotateX(-8deg) rotateZ(-5deg) rotateY(0deg); }
  100% { transform: translate(-50%, -50%) rotateX(-8deg) rotateZ(-5deg) rotateY(-360deg); }
}

.s-hero-new__photo--1 { transform: rotateY(0deg) translateZ(500px) translateY(-18px) scale(1.1); }
.s-hero-new__photo--2 { transform: rotateY(51.4deg) translateZ(480px) translateY(70px) scale(0.88); }
.s-hero-new__photo--3 { transform: rotateY(102.8deg) translateZ(500px) translateY(-46px) scale(0.96); }
.s-hero-new__photo--4 { transform: rotateY(154.2deg) translateZ(460px) translateY(42px) scale(0.86); }
.s-hero-new__photo--5 { transform: rotateY(205.7deg) translateZ(500px) translateY(-58px) scale(1.02); }
.s-hero-new__photo--6 { transform: rotateY(257.1deg) translateZ(470px) translateY(64px) scale(0.84); }
.s-hero-new__photo--7 { transform: rotateY(308.5deg) translateZ(510px) translateY(-24px) scale(0.98); }

/* HJSD-style hero reveal transition */
.s-hero-reveal {
  position: fixed;
  inset: 0;
  z-index: 490;
  pointer-events: none;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  visibility: visible;
}

.s-hero-reveal__clip {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
  will-change: clip-path;
  contain: paint;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.s-hero-reveal__statement-clone {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  min-width: 100vw;
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
  will-change: transform;
  backface-visibility: hidden;
}

.s-hero-reveal__statement-clone .s-statement__carry {
  opacity: 1;
  transform: translateY(0);
}

.s-hero-reveal__statement-clone [data-reveal] {
  opacity: 1;
  transform: translateY(0);
}

.s-hero-title-layer {
  position: fixed;
  inset: 0;
  z-index: 495;
  pointer-events: none;
  overflow: visible;
  opacity: 1;
  visibility: visible;
}

body.is-industries-view .s-hero-title-layer {
  opacity: 0;
  visibility: hidden;
}

.s-statement {
  position: relative;
  z-index: 10;
  display: block;
  min-height: 100vh;
  padding: clamp(110px, 16vh, 170px) clamp(24px, 8vw, 160px) 120px;
  overflow: hidden;
}

.s-statement__title-slot {
  position: relative;
  z-index: 100;
  width: fit-content;
  max-width: min(760px, 100%);
  margin: 0 0 clamp(42px, 7vh, 78px) clamp(0px, 8vw, 140px);
  pointer-events: none;
}

.s-statement__carry {
  --title-green: #2fd38f;
  --title-blue: #24347d;
  --title-gradient-width: 34rem;
  --title-initial-color: #111;
  position: relative;
  left: auto;
  top: auto;
  z-index: 2;
  width: fit-content;
  max-width: min(760px, 100%);
  margin-left: clamp(0px, 8vw, 140px);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s ease, transform 0.65s ease;
  pointer-events: none;
}

.s-statement__title-slot > .s-statement__carry {
  margin-left: 0;
  max-width: 100%;
}

.s-statement__carry.is-hero-title {
  position: fixed;
  top: clamp(112px, 16vh, 170px);
  left: calc(clamp(24px, 8vw, 160px) + clamp(0px, 8vw, 140px));
  z-index: 495;
  margin-left: 0;
  opacity: 1;
  transform: translateY(0);
}

.s-statement__carry.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.s-statement__carry-line {
  display: table;
  margin-bottom: 18px;
  padding: 5px 16px 7px;
  border-radius: 3px;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: clamp(20px, 3vw, 48px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.05em;
  color: #fff;
  background: linear-gradient(to right, var(--title-green) 0, var(--title-blue) var(--title-gradient-width));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.14);
  position: relative;
  isolation: isolate;
  transition: color 0.5s ease;
}

.s-statement__carry-line--one {
  background: linear-gradient(to right, var(--title-green) 0, var(--title-blue) var(--title-gradient-width));
}

.s-statement__carry-line--two {
  background: linear-gradient(to right, var(--title-green) 0, var(--title-blue) var(--title-gradient-width));
}

.s-statement__carry.is-hero-title .s-statement__carry-line {
  background: transparent;
  color: var(--title-initial-color);
}

.s-statement__carry.is-hero-title .s-statement__carry-line::before,
.s-statement__carry.is-hero-title .s-statement__carry-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  transition: opacity 0.5s ease;
}

.s-statement__carry.is-hero-title .s-statement__carry-line::before {
  background: rgba(255, 255, 255, 0.96);
  opacity: 1;
}

.s-statement__carry.is-hero-title .s-statement__carry-line::after {
  background: linear-gradient(to right, var(--title-green) 0, var(--title-blue) var(--title-gradient-width));
  opacity: 0;
}

.s-statement__carry.is-hero-title .s-statement__carry-line--one::after {
  background: linear-gradient(to right, var(--title-green) 0, var(--title-blue) var(--title-gradient-width));
}

.s-statement__carry.is-hero-title .s-statement__carry-line--two::after {
  background: linear-gradient(to right, var(--title-green) 0, var(--title-blue) var(--title-gradient-width));
}

.s-statement__carry.is-hero-title.is-started .s-statement__carry-line {
  color: #fff;
}

.s-statement__carry.is-hero-title.is-started .s-statement__carry-line::before {
  opacity: 0;
}

.s-statement__carry.is-hero-title.is-started .s-statement__carry-line::after {
  opacity: 1;
}

.s-statement__carry-subtitle {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(11px, 1.15vw, 15px);
  font-weight: 400;
  color: #555;
  letter-spacing: 0.1em;
  line-height: 1.7;
  transition: color 0.5s ease, opacity 0.5s ease;
}

.s-statement__carry.is-hero-title.is-started .s-statement__carry-subtitle,
.s-statement__carry:not(.is-hero-title) .s-statement__carry-subtitle {
  color: var(--title-blue);
}

.s-statement__body {
  max-width: 760px;
  margin: 0 0 0 clamp(0px, 8vw, 140px);
  position: relative;
  z-index: 10;
}

.s-statement__line {
  max-width: 760px;
}

@media (max-width: 960px) {
  .s-hero-new__content { max-width: 100%; }
  .s-hero-new__collage-wrapper {
    perspective: 900px;
    opacity: 0.42;
  }
  .s-hero-new__photo {
    width: clamp(220px, 42vw, 380px);
    height: clamp(160px, 31vw, 280px);
    margin-left: calc(clamp(220px, 42vw, 380px) / -2);
    margin-top: calc(clamp(160px, 31vw, 280px) / -2);
  }
  .s-hero-new__photo--1 { transform: rotateY(0deg) translateZ(420px) translateY(-12px) scale(1.1); }
  .s-hero-new__photo--2 { transform: rotateY(51.4deg) translateZ(390px) translateY(50px) scale(0.86); }
  .s-hero-new__photo--3 { transform: rotateY(102.8deg) translateZ(420px) translateY(-28px) scale(0.95); }
  .s-hero-new__photo--4 { transform: rotateY(154.2deg) translateZ(380px) translateY(34px) scale(0.84); }
  .s-hero-new__photo--5 { transform: rotateY(205.7deg) translateZ(420px) translateY(-38px) scale(1); }
  .s-hero-new__photo--6 { transform: rotateY(257.1deg) translateZ(390px) translateY(44px) scale(0.82); }
  .s-hero-new__photo--7 { transform: rotateY(308.5deg) translateZ(420px) translateY(-18px) scale(0.96); }
}

@media (max-width: 600px) {
  .s-hero-new__collage { display: none; }
  .s-hero-new__content { max-width: 100%; padding: 90px 24px 40px; }
  .s-statement__carry {
    max-width: 100%;
    margin-left: 0;
  }
  .s-statement__title-slot {
    max-width: 100%;
    margin: 0 0 clamp(34px, 6vh, 54px) 0;
  }
  .s-statement__carry.is-hero-title {
    top: clamp(96px, 14vh, 130px);
    left: 24px;
    right: 24px;
    max-width: calc(100vw - 48px);
  }
  .s-statement__carry-line {
    display: block;
    width: fit-content;
    max-width: 100%;
    white-space: normal;
  }
  .s-statement__carry-subtitle {
    max-width: 100%;
  }
}