@layer sections {
#opening { position: relative; isolation: isolate; overflow-x: clip; --door-ry: 80%; }
#opening .op-first { position: relative; display: flex; flex-direction: column; align-items: center; padding: calc(var(--navigation-height, 92px) + clamp(28px, 4vw, 52px)) var(--space-2) 0; }
#opening .op-intro { position: relative; z-index: 4; display: grid; justify-items: center; gap: 20px; text-align: center; }
#opening .op-title { font-size: clamp(40px, 5.7vw, 82px); }
#opening .op-title__line { display: block; }
#opening .op-lede { max-width: 540px; }
#opening .op-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
#opening .op-shapes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#opening .op-shape { position: absolute; display: block; }
#opening .op-shape i { display: block; width: 100%; height: 100%; }
#opening .op-shape--arch { left: calc(50% + clamp(330px, 34vw, 470px)); top: calc(var(--navigation-height, 92px) + 38px); width: 84px; height: 54px; }
#opening .op-shape--arch i { background: var(--color-5); border-radius: 50% 50% 0 0 / var(--door-ry) var(--door-ry) 0 0; }
#opening .op-shape--circle { left: calc(50% - clamp(400px, 38vw, 540px)); top: calc(var(--navigation-height, 92px) + 70px); width: 46px; height: 46px; }
#opening .op-shape--circle i { background: var(--color-11); border-radius: 50%; }
#opening .op-shape--plus { left: calc(50% + clamp(360px, 33vw, 470px)); top: calc(var(--navigation-height, 92px) + 230px); width: 44px; height: 44px; }
#opening .op-shape--plus i { --m-shape-size: 100%; background: var(--color-10); }
#opening .op-shape--diamond { left: calc(50% - clamp(330px, 30vw, 440px)); top: calc(var(--navigation-height, 92px) + 250px); width: 40px; height: 40px; }
#opening .op-shape--diamond i { --m-shape-size: 100%; background: var(--color-6); }
#opening .op-shape--square { left: calc(50% + clamp(250px, 24vw, 330px)); top: calc(var(--navigation-height, 92px) + 300px); width: 30px; height: 30px; }
#opening .op-shape--square i { --m-shape-size: 100%; background: var(--color-7); }
#opening .op-photo { position: relative; z-index: 0; width: 100%; max-width: 1216px; margin-top: clamp(36px, 4.5vw, 56px); border-radius: var(--radius-1) var(--radius-4) var(--radius-1) var(--radius-1); overflow: hidden; background: var(--color-3); }
#opening .op-photo__in { aspect-ratio: 16 / 7.2; overflow: hidden; }
#opening .op-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 74%; transform: scale(1.08); }
#opening .op-second { position: relative; display: grid; align-content: center; min-height: 100svh; margin-top: clamp(72px, 9vw, 128px); padding: clamp(150px, 15vw, 220px) var(--space-2) clamp(72px, 8vw, 112px); }
#opening .op-door { position: absolute; inset: 0; z-index: 0; background: var(--color-5); border-radius: 50% 50% 0 0 / var(--door-ry) var(--door-ry) 0 0; }
#opening .op-visit { position: relative; z-index: 3; width: min(100%, 1080px); margin: 0 auto; display: grid; justify-items: center; gap: clamp(36px, 4.5vw, 60px); text-align: center; }
#opening .op-visit__title { max-width: 13ch; font-size: clamp(38px, 4.8vw, 72px); }
#opening .op-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); width: 100%; text-align: left; }
#opening .op-step { display: grid; align-content: start; gap: 12px; padding-top: 18px; border-top: 1.5px solid var(--color-2); }
#opening .op-step__top { display: flex; align-items: center; justify-content: space-between; }
#opening .op-step__mark { --m-shape-size: 30px; }
#opening .op-step .m-text { font-size: 16px; }
@media (max-width: 900px) {
  #opening { --door-ry: 26%; }
  #opening .op-title { font-size: 8.6vw; }
  #opening .op-shape--arch { left: auto; right: calc(var(--space-2) + 2px); top: auto; bottom: calc((100vw - 2 * var(--space-2)) * .85 - 30px); width: 50px; height: 38px; }
  #opening .op-shape--circle { left: var(--space-2); top: auto; bottom: 24%; width: 30px; height: 30px; }
  #opening .op-shape--plus { left: calc(var(--space-2) + 14px); right: auto; top: auto; bottom: calc((100vw - 2 * var(--space-2)) * .85 - 48px); width: 26px; height: 26px; }
  #opening .op-shape--diamond { display: none; }
  #opening .op-shape--square { display: none; }
  #opening .op-photo { border-radius: 22px 120px 22px 22px; }
  #opening .op-photo__in { aspect-ratio: 4 / 3.4; }
  #opening .op-second { padding-top: 132px; }
  #opening .op-steps { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-width: 1120px) {
  #opening .op-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: no-preference) {
  #opening .op-intro { animation: op-rise .9s cubic-bezier(.2, .7, .2, 1) backwards; }
  #opening .op-photo__in { animation: op-open 1.1s cubic-bezier(.2, .7, .2, 1) backwards; }
  #opening .op-shapes { animation: op-fade .8s .25s ease-out backwards; }
  #opening .op-photo img { animation: op-pan 7s ease-in-out infinite alternate; }
  #opening .op-shape--circle i { animation: op-orbit 6s linear infinite; }
  #opening .op-shape--plus i { animation: op-turn 5s ease-in-out infinite alternate; }
  #opening .op-shape--diamond i { animation: op-swing 4.4s ease-in-out infinite alternate; }
  #opening .op-shape--square i { animation: op-tilt 3.8s ease-in-out infinite alternate; }
}
@keyframes op-rise { from { transform: translateY(26px); } }
@keyframes op-open { from { clip-path: inset(5% 4% 0 4% round 40px); transform: translateY(40px); } to { clip-path: inset(0 0 0 0 round 0px); transform: none; } }
@keyframes op-fade { from { opacity: 0; transform: translateY(18px); } }
@keyframes op-pan { from { transform: scale(1.08) translateX(-3%); } to { transform: scale(1.08) translateX(3%); } }
@keyframes op-orbit { from { transform: rotate(0deg) translateX(30px) rotate(0deg); } to { transform: rotate(360deg) translateX(30px) rotate(-360deg); } }
@keyframes op-turn { from { transform: translateY(-14px) rotate(-30deg); } to { transform: translateY(14px) rotate(60deg); } }
@keyframes op-swing { from { transform: translateX(-18px) rotate(-20deg); } to { transform: translateX(18px) rotate(25deg); } }
@keyframes op-tilt { from { transform: translateY(10px) rotate(-12deg); } to { transform: translateY(-12px) rotate(18deg); } }
}