#stormhill-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9998; opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
#stormhill-modal {
  position: fixed; z-index: 9999; background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  display: flex; flex-direction: column; transition: opacity .25s ease, transform .25s ease;
  opacity: 0; pointer-events: none;
  background-size: cover; background-repeat: no-repeat; background-position: center;
}
#stormhill-overlay.stormhill-hidden,
#stormhill-modal.stormhill-hidden {
  display: none;
}
#stormhill-modal.stormhill-visible { opacity: 1; pointer-events: auto; }
#stormhill-overlay.stormhill-visible { opacity: 1; pointer-events: auto; }
#stormhill-close { position: absolute; background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; padding: 0; width: 34px; height: 34px; }
#stormhill-close.stormhill-close-inline { top: 8px; right: 12px; }
#stormhill-close.stormhill-close-floating {
  background: rgba(0,0,0,0.65); color: #fff; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
#stormhill-content { padding: 0; max-height: 80vh; overflow: hidden; }

/* Placement helpers */
.stormhill-place-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.stormhill-place-bottom { left: 50%; bottom: 20px; transform: translateX(-50%); }
.stormhill-place-top { left: 50%; top: 20px; transform: translateX(-50%); }
.stormhill-place-left { left: 20px; top: 50%; transform: translateY(-50%); }
.stormhill-place-right { right: 20px; top: 50%; transform: translateY(-50%); }
.stormhill-place-bottom-left { left: 20px; bottom: 20px; }
.stormhill-place-bottom-right { right: 20px; bottom: 20px; }
.stormhill-place-top-left { left: 20px; top: 20px; }
.stormhill-place-top-right { right: 20px; top: 20px; }

@media (max-width: 768px) {
  #stormhill-modal { border-radius: 0; }
}

/* Close floating positions (outside, toward center) */
.stormhill-close-floating { position: absolute; }
.stormhill-closepos-center #stormhill-close { top: -18px; right: -18px; }
.stormhill-closepos-bottom #stormhill-close,
.stormhill-closepos-bottom-left #stormhill-close,
.stormhill-closepos-bottom-right #stormhill-close { top: -18px; right: -18px; }
.stormhill-closepos-top #stormhill-close,
.stormhill-closepos-top-left #stormhill-close,
.stormhill-closepos-top-right #stormhill-close { bottom: -18px; right: -18px; }
.stormhill-closepos-left #stormhill-close { top: -18px; right: -18px; }
.stormhill-closepos-right #stormhill-close { top: -18px; left: -18px; }

/* Templates */
.stormhill-template-simple #stormhill-content,
.stormhill-template-split #stormhill-content,
.stormhill-template-card #stormhill-content { background: #fff; }
.stormhill-wysiwyg { padding: 24px; }
.stormhill-btn {
  display: inline-block; margin: 16px 24px 24px; padding: 12px 18px; border-radius: 6px; text-decoration: none; font-weight: 600;
  background: var(--stormhill-btn-bg, #2d6cdf); color: var(--stormhill-btn-text, #fff);
  transition: background-color .2s ease, transform .2s ease;
  max-width: 250px; width: 100%; text-align: center; text-transform: uppercase; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  border: none; outline: none;
}
.stormhill-btn:hover { background: var(--stormhill-btn-bg-hover, var(--stormhill-btn-bg, #1c4fa8)); color: var(--stormhill-btn-text-hover, var(--stormhill-btn-text, #fff)); transform: translateY(-1px); text-decoration: none; }
.stormhill-btn-wrap { display: flex; padding: 0 24px 24px; }
.stormhill-btn-wrap.align-left { justify-content: flex-start; }
.stormhill-btn-wrap.align-center { justify-content: center; }
.stormhill-btn-wrap.align-right { justify-content: flex-end; }

.stormhill-template-split .stormhill-split { display: grid; grid-template-columns: 1fr 2fr; min-height: 240px; height: 100%; }
.stormhill-split-img { height: 100%; }
.stormhill-split-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stormhill-split-content { display: flex; flex-direction: column; justify-content: space-between; background-size: cover; background-repeat: no-repeat; background-position: center; }

.stormhill-template-card .stormhill-card { display: grid; grid-template-rows: 25% 1fr auto; min-height: 320px; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; }
.stormhill-card-img { overflow: hidden; height: 100%; max-height: 100%; }
.stormhill-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stormhill-card-body { padding: 0 24px; }
.stormhill-card-footer { padding: 0 24px 24px; }

.stormhill-template-simple .stormhill-simple { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background-size: cover; background-repeat: no-repeat; background-position: center; height: 100%; }

@media (max-width: 768px) {
  .stormhill-template-split .stormhill-split { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .stormhill-btn { margin: 16px 20px 20px; }
}

/* Animations */
.stormhill-anim-fade-in { animation: stormhill-fade-in .35s ease both; }
.stormhill-anim-fade-up { animation: stormhill-fade-up .4s ease both; }
.stormhill-anim-fade-down { animation: stormhill-fade-down .4s ease both; }
.stormhill-anim-fade-left { animation: stormhill-fade-left .4s ease both; }
.stormhill-anim-fade-right { animation: stormhill-fade-right .4s ease both; }
.stormhill-anim-swing-right { animation: stormhill-swing-right .5s cubic-bezier(.25,.8,.25,1) both; transform-origin: left center; }
.stormhill-anim-swing-left { animation: stormhill-swing-left .5s cubic-bezier(.25,.8,.25,1) both; transform-origin: right center; }
.stormhill-anim-swing-bottom { animation: stormhill-swing-bottom .5s cubic-bezier(.25,.8,.25,1) both; transform-origin: center top; }
.stormhill-anim-swing-top { animation: stormhill-swing-top .5s cubic-bezier(.25,.8,.25,1) both; transform-origin: center bottom; }

@keyframes stormhill-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes stormhill-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes stormhill-fade-down {
  from { opacity: 0; transform: translateY(-24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes stormhill-fade-left {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes stormhill-fade-right {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes stormhill-swing-right {
  from { opacity: 0; transform: perspective(800px) rotateY(-25deg) translateX(24px); }
  to { opacity: 1; transform: perspective(800px) rotateY(0deg) translateX(0); }
}
@keyframes stormhill-swing-left {
  from { opacity: 0; transform: perspective(800px) rotateY(25deg) translateX(-24px); }
  to { opacity: 1; transform: perspective(800px) rotateY(0deg) translateX(0); }
}
@keyframes stormhill-swing-bottom {
  from { opacity: 0; transform: perspective(800px) rotateX(-25deg) translateY(24px); }
  to { opacity: 1; transform: perspective(800px) rotateX(0deg) translateY(0); }
}
@keyframes stormhill-swing-top {
  from { opacity: 0; transform: perspective(800px) rotateX(25deg) translateY(-24px); }
  to { opacity: 1; transform: perspective(800px) rotateX(0deg) translateY(0); }
}